.svg

How to Open and Edit SVG Files

Every browser opens SVGs. For editing, you have excellent free options.

Guide

SVG files are XML-based vector graphics. Because they're both image files and text files, they can be opened in more ways than almost any other format.

To view an SVG, open it in any web browser — Chrome, Firefox, Safari, Edge. Just drag the file into a browser window or double-click it (if your browser is set as the default for SVG). The browser renders it at any zoom level without quality loss. This is the fastest way to check what an SVG looks like.

To edit an SVG as a graphic, Inkscape (free, cross-platform) is the standard open-source vector editor. It opens SVGs natively and gives you full control over paths, shapes, text, gradients, and transformations. It's the free equivalent of Adobe Illustrator for vector work.

Figma (free tier, browser-based) imports SVGs and lets you edit them in a modern design tool. This is convenient if you're already using Figma for design work. Illustrator is the professional standard but requires a paid subscription.

To edit an SVG as code, open it in any text editor — VS Code, Sublime Text, Notepad. SVG is XML, so you can directly edit paths, colours, dimensions, and styles. This is the fastest way to change a colour (`fill="#FF0000"` → `fill="#0000FF"`), resize (`width="24"` → `width="48"`), or strip unnecessary metadata to reduce file size.

For quick colour or size changes, editing the SVG code directly is often faster than opening a design tool. For complex shape editing, use Inkscape or Figma.

Do it with fwip

Free, instant, private. Your files never leave your browser.

FAQ
What's the best free SVG editor?
Inkscape for full-featured vector editing (desktop). Figma for browser-based design. VS Code or any text editor for quick code-level edits to colours, sizes, and paths.
Can I edit SVG in Photoshop?
Photoshop can open SVGs but rasterises them into pixels, destroying the vector data. For vector editing, use Illustrator, Inkscape, or Figma. Photoshop is the wrong tool for SVG.
Why does my SVG look different in different browsers?
Minor rendering differences exist across browsers, especially with filters, text rendering, and complex gradients. For consistent rendering, stick to basic SVG features, embed fonts, and test across browsers.
Back to .svg overview
More about .svg