How to create and edit SVG files online

SVG is the quiet format behind nearly every crisp logo, app icon, and razor-sharp illustration you see on the web. The best part: you don't need an expensive design suite to make one. You can draw a vector graphic, tweak its colors, and save a proper .svg file right in your browser — for free. This guide explains what an SVG actually is, why vectors beat ordinary images, and how to create and edit one step by step.

What is an SVG?

SVG stands for Scalable Vector Graphics. Instead of storing a picture as a grid of colored dots, an SVG stores a set of instructions for drawing shapes: "draw a line from here to there," "fill this circle red," "follow this curve." It is an open, text-based format built on XML, so an SVG is literally readable code. Open one and you'll see tags like <svg>, <rect>, <circle>, <path>, and <text>. Each describes a shape with numbers and math rather than pixels. Because the recipe is math, the browser can redraw the image perfectly at any size.

Vector vs raster (PNG/JPG)

Most images you handle every day are raster images: PNG, JPG, GIF. A raster image is a fixed grid of pixels. It looks fine at its native size, but blow it up and the pixels stretch into a blurry, blocky mess — there's simply no extra detail to invent.

A vector image like SVG is different. Since it's defined by math, the browser recalculates every shape for whatever size you ask. Scale it to a tiny favicon or a wall-sized banner and the edges stay perfectly crisp. Vectors also tend to be far smaller in file size for flat artwork — a logo might be a few kilobytes of text instead of a heavy bitmap — and because the file is plain code, you can edit colors or shapes directly.

The trade-off is simple. Use vector (SVG) for logos, icons, line art, and illustrations that must stay sharp at any scale. Use raster (PNG/JPG) for photographs, where every pixel carries unique color information that math can't reasonably describe. Knowing which to reach for saves you a lot of grief later.

Create and edit SVG with Office Tools

You can make a vector graphic without installing anything. The free Office Tools SVG Editor runs entirely in your browser: draw shapes and paths, set fill and stroke (outline) colors, move, resize, and arrange your elements on the canvas, then save the result as a real .svg file. It's a desktop-oriented tool — the precision of a mouse and a larger canvas make vector work much easier — so reach for a laptop or desktop rather than a phone.

1. Open the SVG Editor in your browser. A blank canvas appears, ready to draw on.
2. Add shapes. Draw rectangles, circles, and lines for the basic structure, and use the path tool for custom curves and freeform outlines.
3. Set colors. Give each shape a fill (its interior color) and a stroke (its outline color and thickness) until it looks the way you want.
4. Arrange the elements. Move, resize, and reorder shapes on the canvas so they line up and stack correctly.
5. Save it. Export your work as an .svg file to your computer, ready to drop into a website, document, or another design tool.

Tip: build your graphic out of a few clean shapes rather than many tiny fragments. Simpler geometry is easier to recolor and resize later, and it keeps the saved file small.

Editing an existing SVG

You don't have to start from a blank canvas. Open an existing .svg in the editor and you can adjust it without redrawing anything: recolor a shape's fill or stroke, resize or reposition an element, or delete a part you no longer need. This is perfect for small tweaks — swapping a brand color, nudging an icon into alignment, or trimming an illustration down — then saving it back out as a clean .svg.

Tips for clean SVGs

• Keep shapes simple. A few well-placed paths beat dozens of overlapping fragments. Simpler geometry renders faster and edits more easily.
• Use consistent sizing. Decide on a canvas size and align elements to it so the graphic scales predictably wherever it's used.
• Organize and name your elements. Grouping and labeling related shapes makes a complex graphic far easier to revisit and adjust.
• Prefer flat color for icons. Solid fills keep icons legible at small sizes and keep the file tiny.
• Test how it scales. View the graphic both very small and very large to confirm it stays crisp and balanced at every size.

Where SVGs shine

Vectors are the right tool whenever an image must look sharp no matter the screen or print size. Common cases include website logos and icons that must stay crisp on every display, from a phone to a 4K monitor; print-ready vector art that can be scaled up to poster size without losing quality; and illustrations and diagrams that need to remain clean across countless devices and zoom levels. Anywhere clarity at any size matters, SVG earns its place.

Related guides

• How to make a flowchart online
• Edit images in your browser
• Open the SVG Editor

Frequently asked questions