Edit an SVG file

What comes in, and what does not

Octoolo reads the SVG and turns it into objects you can edit:

• Rectangles, circles, ellipses and polygons stay live shapes, with their corners and sizes still editable.
• Paths keep every anchor point; gradients, clipping paths and reused copies (<use>) come along.
• Text stays text, in the font the file names when it is on your PC.

A few SVG features are left out, and the note that appears as the file opens names them: filters such as blurs and drop shadows, masks, pattern fills (they become plain gray), pictures linked from outside the file, and embedded HTML.

The same editor opens PDF files, each page as an artboard, and Illustrator .ai files saved with PDF content, which is Illustrator's default.

Save or Export?

File › Save writes an SVG that opens in any app. Inside it, Octoolo keeps a copy of the whole document, so when you open it here again, live shapes, Pathfinder combinations, layers and text settings come back exactly. When Octoolo knows where the file is, Save writes over it; Save as… (Ctrl Shift S) keeps the original and writes a new file.

File › Export… with SVG writes a clean file without that copy: smaller, for websites and other programs. Choose the unit (px, mm, cm, in or pt) and 1 to 4 decimals; fewer decimals make a smaller file. Text as outlines turns text into shapes in the exported file only, so it looks the same where the font is missing.

Common SVG fixes

• Recolor an icon set. Document colors changes a color across the whole file; Select › Same fill color picks every shape of one color.
• Resize to an exact size. Select everything (Ctrl A) and type the width or height under Position and size, in the document's unit. Change the artboard's size in the Properties panel with nothing selected.
• Remove a background. Click the rectangle behind the art and press Delete.
• Make it portable. Type › Create outlines turns text into shapes.
• Lighten a heavy file. Object › Path › Simplify… takes out extra anchor points from traced or exported paths.
• Close a gap. Select two open paths and press Ctrl J to join them.

Drawing or code?

An SVG is a text file, and small fixes such as a color code can be made in a text editor. Anything about shape, position or layout is far easier to see and do visually, which is what the Vector Editor is for.

The two meet on the clipboard. Copy (Ctrl C) puts the selected objects on the clipboard as SVG code, ready to paste into a code editor or a web page, and pasting SVG code into the Vector Editor brings it in as shapes.

For a picture of the SVG instead, Export makes PNG, JPG or WebP at 1×, 2×, 3× or an exact width, drawn from the shapes; see SVG to PNG.