SVG Editors: The Best Tools for Your Workflow

Most SVG editors draw about equally well. What actually splits them is whether you can open the markup when a file misbehaves on a live page, and the toolbar has very little to do with that.

Inkscape works on SVG natively, and so do Boxy SVG and SVG-Edit. Illustrator, Affinity, Sketch and Figma keep their own document format and only convert to SVG when you export.

Pricing moved in 2025. Canva relaunched Affinity as a free app on 30 October 2025, per its announcement, so a full desktop vector studio now costs nothing beyond a Canva account. Open source Inkscape was already free.

What counts as an SVG editor?

A raster editor stores pixels. SVG stores each shape as text, which is why the file stays sharp at any size. Programs that read and write that XML give you direct access to paths, nodes and markup that raster editors never expose, and those are the ones covered here.

Inside that group, the line that matters runs between programs that edit SVG itself and programs that only export it.

Native editors and export-only tools

A native editor opens an SVG, changes it and saves SVG back. Inkscape, Boxy SVG and SVG-Edit all work that way. Figma, Sketch and Affinity are different. The file lives in an internal document format and only becomes SVG on export. Penpot is the odd one out, since by its own documentation it stores designs as SVG natively.

Export-only tools show the conversion as settings. Figma’s developer documentation lists SVG-specific export options for text (outlines or text elements), layer names written into id attributes, node ids written into data-node-id attributes, and simplified strokes.

Outlined text looks the same everywhere. Keeping text as text elements leaves it selectable and the file easier to read, though Figma itself says visual accuracy isn’t guaranteed that way.

Code access

Code access decides whether you can fix a file by hand when the visual tools fall short.

Since an SVG file is plain XML, editors can show you the markup directly, though they go about it differently. Inkscape has an XML editor, a document tree where you change attributes node by node. Boxy SVG and SVG-Edit use a source view instead, a code panel that shows the markup as written.

Whichever you use, look at the viewBox. It holds four numbers (min-x, min-y, width, height) that map a rectangle of drawing space onto the viewport, per MDN Web Docs.

When a graphic stops resizing with its container, the viewBox is usually why. And if your editor has no source view, you can’t even tell whether the export dropped it.

SVG versions and file formats

SVG 1.1 is the safe target. SVG 2 on the W3C site is a Candidate Recommendation Snapshot dated 6 October 2026, and W3C expects it to advance to Recommendation no earlier than 1 December 2026.

Support for SVG 2 is partial across editors, so a file built on its features can render differently once it leaves the program that made it. Inkscape has handled SVG 2 text (multi-line text and text flowed inside a shape) since version 1.0, according to its release notes.

Format coverage varies just as much. Inkscape reads and saves PDF, EPS, DXF and PNG alongside SVG. Version 1.4 (October 2024) added an importer for Affinity Designer’s native files, per its release notes, and LWN’s preview of that release also describes closer compatibility with Illustrator.

How do the main SVG editors compare at a glance?

Drawing tools overlap heavily. Price and platform differ more, and source access differs most.

Pricing in this article reflects October 2026. Vendors change plans often, so confirm on the vendor page before buying.

If the file ships to a website, I’d choose on source access first. If you work on Linux or stick to one operating system, platform comes first.

For web icons, a source view matters more than a long feature list.

Which desktop SVG editors are worth installing?

Inkscape is the default free pick, and Affinity now gives you a full vector studio at no cost. Illustrator really only makes sense for teams already inside Adobe’s tools.

Inkscape

Inkscape is the closest free match to Illustrator, and the only desktop editor here that treats the SVG document tree as the working file.

It’s free and open source on Windows, macOS and Linux, and the XML editor lets you fix attributes one at a time. It also reads and saves PDF, EPS, DXF and PNG besides SVG. The downsides are real. The learning curve is steep, and there’s no browser version, so it’s desktop only.

Version 1.4 (October 2024) added a Filter Gallery that previews the SVG filters bundled with the program, per LWN.

Adobe Illustrator

Illustrator’s single-app plan costs $22.99 a month on an annual commitment and $34.49 month to month, or $263.88 for a prepaid year (Photutorial’s 2026 pricing breakdown).

No free tier exists, and Adobe sells no one-time license.

What you get for the money is native AI files and an editing toolset the other programs get measured against. The catch, apart from cost, is a workflow built around artboards rather than markup.

Affinity

Canva relaunched Affinity as a single free app on 30 October 2025, merging vector, photo and layout tools into one studio.

The app needs a free Canva account and launched on Mac and Windows only, according to Canva’s announcement.

One documented limit. When SVG cannot express a property, Affinity rasterizes it on export. Release 3.2.3 fixed a bug where that fallback produced wrong or duplicated content for duplicated objects (Affinity release notes, via Neowin).

CorelDRAW and Sketch

Both are paid, and both serve a narrower audience than Inkscape or Affinity.

CorelDRAW puts illustration and page layout in one suite, but it’s print-first and treats SVG as one export among many.

Sketch brings UI-focused tools such as artboards and symbols, plus a Mac-only license at $120 per seat, paid once and including one year of updates, per Sketch’s pricing page. It runs on macOS only, and the browser app serves review rather than editing.

Linearity Curve

Linearity Curve is built for Apple devices and Apple Pencil, which makes it the natural choice for sketching vector art on an iPad.

It’s free to download and tablet-first, though the free plan has limits. Curve runs on Mac, iPad and iPhone only, with no Windows or Linux version, so files shared with other teams need an export step. Linearity’s browser app does run on Windows and Linux, but it is a separate prompt-driven design tool rather than Curve.

Best free and browser-based SVG editors

Boxy SVG is the strongest low-cost browser editor for real SVG work. If you want an editor inside your own product, SVG-Edit fits, and Vectr covers beginners who want to collaborate.

Boxy SVG

It’s built around SVG itself rather than a general design canvas, with a code view beside the drawing area.

It isn’t free, though. After a 15-day trial it needs a paid license, from about $10 a year for the standard web license.

SVG-Edit and Method Draw

SVG-Edit is a JavaScript-driven editor that runs in any modern browser. Its GitHub page documents hosting your own copy: clone the repository, run npm i to install dependencies, then run npm run build to produce a bundle you can serve from your own web server.

The master branch is version 7, which the project README recommends, while version 6.1.0 remains available for older browsers.

It’s free, open source, needs no account and can be embedded. On the other side, there are no boolean operations and the path tools are limited.

Method Draw sits at the simple end of the same idea. Free, no account, basic shapes and paths.

Vectr

Vectr runs in the browser and as a desktop app, with real-time collaboration and exports to SVG, PNG and JPG.

It’s free and easy for a first vector project, but it’s built for simple graphics and not markup-level editing.

Figma and Penpot

Figma is strong for UI work and teamwork, but it’s export-only, so SVG quality depends on the export settings covered earlier.

Penpot is open source under MPL 2.0 and stores designs as SVG, which Penpot says removes vendor lock-in. Even so, it’s a UI design platform first and a drawing program second.

Corel Vector

Skip it. Corel retired Corel Vector, formerly Gravit Designer, on 31 August 2025, and the app and its stored files are no longer available.

Roundups that still list it are out of date, so check the publish date before trusting any list.

Which SVG editor suits icons, logos, animation or laser cutting?

Choose by what has to come out the other end. Icons for the web need clean markup and logos need precise paths. Animation depends on having CSS hooks in the file, and laser cutters want DXF.

Beginner tools stop at basic shapes and paths. The first job that needs markup-level edits sends you to Inkscape or Boxy SVG.

Animation

Editors draw the artwork. CSS or script moves it.

Group each moving part and give the group a clear id before export, then write the motion in a stylesheet, which is how most teams animate an SVG with CSS. Keyframes, timing and triggers all live in the code, so the editor’s job stops at shapes, groups and ids.

Laser cutting

Laser cutting turns an SVG into a cut path, and a few small details decide whether the cut lands where you drew it.

• The laser cuts along the center of the line, so stroke width matters less than where the path sits (iMAL makerspace guide).
• Inkscape 1.1 added a hairline stroke type that always renders 1 px wide at any zoom, though PDF and PostScript hairline export was not yet available in official packages at that release, per its release notes.
• Kerf, the groove the beam burns away, measures about 0.3 mm on the Lasersaur at the Hal9k makerspace, so the offset runs half that, 0.15 mm.
• DXF carries no units, and Inkscape forum answers advise converting objects to paths first, since DXF does not recognize many SVG objects.

The iMAL guide also recommends unticking both “use” options in Inkscape’s DXF export module and calls that filter a bit outdated. Cut a test piece on scrap before the real material.

How clean is the SVG an editor exports?

Not clean enough to ship as is. Editors write document settings, namespaces and redundant data into the file, and SVGO or Scour strip it back out. Older SVGO versions could also strip the viewBox and the accessible name by default, and SVGO 4 no longer does.

What editors leave in the file

Inkscape’s native format shows the pattern. Its sodipodi:namedview element stores page color, zoom level and even window size and position, according to a note in the Inkscape project’s issue tracker.

Inkscape SVG is plain SVG plus extra commands in the inkscape: and sodipodi: namespaces, which other editors treat as ordinary SVG, per the Inkscape wiki.

Inkscape SVG is the one that keeps stars and boxes editable as live shapes. Plain SVG writes only the svg namespace, which means those same shapes reopen as ordinary paths (Inkscape community answers).

Sources disagree on file size. An Inkscape wiki note observes that Inkscape SVG sometimes came out smaller than plain SVG, while an Inkscape developer-list thread names saving space as a reason to choose plain SVG.

Measure both saves on your own file instead of assuming.

What optimizers remove

SVGO is a Node.js tool built from plugins, and the preset-default list on svgo.dev runs 33 plugins. SVGOMG is a browser interface that shows SVGO’s options with a live preview. Scour is a Python tool under the Apache License 2.0, installed with pip, and it aims for output that renders identically at a fraction of the size.

Running an SVG optimization pass is a deletion job, so every default decides what you give up.

Inkscape users can call SVGO from inside the editor through the third-party inkscape-svgo plugin, which older SVGO READMEs listed.

Where default settings can damage a file

A handful of plugins deserve a check before anything ships, and SVGO 4 dropped two of them from the default preset, so what you see depends on your version.

The W3C’s accessible SVG guidance maps the title element to the accessible name and desc to the accessible description. That made accessible SVG files a casualty of the pre-4 default preset, and it is why SVGO 4 dropped removeTitle from the defaults.

Older TPGi browser testing found title and desc exposed inconsistently, and role=”img” with aria-labelledby fixed it. Keep both the elements and the ARIA pattern.

On SVGO 4, leave removeViewBox and removeTitle out of your config, since neither runs by default. On SVGO 3 or earlier, or in a tool that bundles an older version, set removeViewBox and removeTitle to false inside the preset-default overrides. In every version, keep removeAny off for removeDesc, and set cleanupIds to false the same way if scripts or stylesheets rely on your ids.

How to check an editor’s output

Export the same icon from 2 or 3 editors and run each through SVGO or SVGOMG with the viewBox and title kept. Then compare byte size and read the root element of each file.

How to edit an existing SVG file without breaking it

Always start on a copy. The order below holds in any editor with source access.

1. Copy the file. Open the copy in Inkscape or Boxy SVG and leave the original untouched.
2. Read the root element. Open the XML editor or code view and note the viewBox, width, height and any editor namespaces.
3. Edit with the node and pen tools. Move anchor points and adjust bezier curves instead of redrawing whole shapes.
4. Check groups and ids. CSS and script hooks depend on them.
5. Decide on text. Choose between live text and outlines before saving.
6. Save and run an optimizer. Keep an Inkscape SVG as your master, export Plain SVG, run SVGO or Scour with the viewBox kept, then view both versions side by side in a browser.

SVG text renders with whatever fonts the viewer has installed. Outlines are the safer choice for logos, and live text suits copy that has to stay selectable.

Walkthroughs on editing SVG files in specific programs cover the menu paths, and the order above holds in all of them.

Fonts go missing after you save live text, and a viewBox can get dropped during optimization. Renamed ids are the sneakiest failure, because animation or script hooks just stop working.

When is an SVG editor the wrong tool?

When the source is a photograph or a scan. Tracing builds curves from a bitmap, and the result depends on the input rather than on the editor.

Tracing limits

Inkscape traces bitmaps with Potrace, written by Peter Selinger, through Path, Trace Bitmap (Shift+Alt+B).

Black-and-white line drawings trace well. Scans of screened color prints trace badly. Paths can reach thousands of nodes, which taxes the CPU, per O’Reilly’s Inkscape guide, though the Suppress speckles option cuts the node count.

The Inkscape tutorial says the tracer gives you curves to work from and does not reproduce the original, and that no autotracer can.

Anyone converting PNG to SVG should start with flat logos and line art, and expect to clean up nodes by hand.

Photographs stay raster

Keep photographs in a raster format. The difference between SVG and PNG is what each stores, shapes and paths versus a grid of pixels, so a traced photo can grow in file size and lose detail.

Use an SVG editor for shapes, paths and icons and a raster editor for photos. Tracing is only worth it for flat line art.

SVG Editors FAQ

What is an SVG file used for?

Mostly web graphics that have to stay sharp at every size, such as logos, icons, illustrations, charts and buttons. Because SVG stores shapes as text, one file serves a phone screen and a print banner, and a stylesheet can restyle it.

Can you edit an SVG file in a plain text editor?

Yes, since SVG is plain XML. Small fixes like a viewBox value, an id or a fill color take seconds. Drawing new curves by hand is impractical, though, and that’s what the node tools in Inkscape or Boxy SVG are for.

Can an SVG file contain malicious code?

Yes. SVG is XML that browsers can execute, so scripts inside a file run when it is opened directly. Browsers block them when the file loads through an img tag, per a HackerOne report, so embedding SVG in HTML that way is the safer route for files you did not make.

Does saving as Plain SVG remove scripts from a file?

No. In one published security test, an older Inkscape plain SVG export left the JavaScript in place.

Plain SVG strips editor namespaces, not scripts, so sanitize untrusted files or serve them as downloads.

Does a decorative SVG icon need a title?

No. A purely decorative SVG carries no title or desc element and takes role=”presentation” so screen readers skip it, per DAISY’s SVG guidance. On web pages, aria-hidden=”true” is the more reliable way to hide it, because role=”presentation” only removes the element’s semantics (University of Melbourne accessibility guidance).

Icons that convey meaning keep a title and a description.

Can you use an SVG editor offline?

Yes, with a desktop editor. Inkscape runs locally, and Affinity stores your work on your own device, according to Canva.

Browser editors depend on a connection unless you host them, and SVG-Edit can be hosted from a cloned copy, so it can run on your own machine.

When Paid SVG Editors Are Worth the Cost

Free editors already cover drawing, source access and export, so a paid one has to justify itself with something specific. That usually means a workflow that depends on Adobe file formats, Mac-only UI tooling or a team standard.

Price no longer separates the options. A prepaid Illustrator year costs more than twice the one-time Sketch Mac license, and Affinity costs nothing.

Install Inkscape or Affinity first. Then run one real file through SVGO with the viewBox and title kept, and pay only when that test fails or a client requires a format.

A real file exposes failures faster than any feature list. This position holds as of October 2026, and a change to Affinity’s free terms or to Adobe’s plan pricing would reverse it.

With the editor chosen, making SVG files from scratch is the natural next step, starting with a single icon.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• What is Backend in Web Development? - September 13, 2026
• What is Frontend Development? - September 11, 2026
• How to Make a Button in Figma: Design Best Practices - September 10, 2026