Menu

1 / 5

Editing an SVG without Illustrator, and what the editor quietly changes in your file

DEV Community: beginners·Usman Bashir·2 days ago
#Qotj4Idc
#devtobeginners#devto#dev#leaf#name
Reading 0:00
15s threshold

You do not need Illustrator to edit an SVG. You need a browser, or Inkscape, or a text editor. The part nobody mentions is what the editor does to the markup when it saves.

TL;DR: open the file in a browser editor such as SVG Lab (svglab.app), click a shape to recolour it, double-click words to retype them. No install, no account to edit. Then diff the source before you ship it, because ids and element types can change.

The test file

A 636-byte badge: two <circle> s, one <path> (a leaf), two <text> lines, every element with an id .

Two edits

Click the leaf, pick a pink swatch in Fill. #f2c14e became #ef476f .

Double-click "Fresh Roast", type "Slow Roast".…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.