Guide · 4 min read

What an SVG file is, and how to open, make and edit one.

An SVG is a picture written as text: point at a line of this real one to find the shape it draws. Then what the format is for, and how to open, make and edit one.

vecsnap.svg0.80 KB · 36 anchor points
  1. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
  2. <rect width="2048" height="2048" fill="#f6eede"/>
  3. <circle cx="1024.08" cy="1023.82" r="627.15" fill="#22314b"/>
  4. <path fill="#f3c563" d="M1428.73 1297.27l-809.41.01-12.41-19.67c-125.17-203.82-82.18-466.41 97.16-621.96 231.06-200.4 579-142.89 737.71 115.66a483.37 483.37 0 0 1 .41 505.09l-13.46 20.87z"/>
  5. <path fill="#f3c563" d="M658.54 1347.21l730.99-.01q-29.99 32.64-49.89 49.2H708.71a684.61 684.61 0 0 1-50.17-49.19z"/>
  6. <path fill="#f3c563" d="M779.97 1446.41l488.24.07-17.68 9.76c-144.51 76.51-311.67 75.5-455.64-1.48l-14.92-8.35z"/>
  7. <circle cx="1024.05" cy="1023.97" r="217.99" fill="#f16b50"/>
  8. <path fill="#f16b50" d="M1024.07 578.7l22.73 69.58 72.49.11-58.71 43.25 22.84 70.15-59.3-43.66-59.7 43.77 23.06-70.24-58.7-43.25 72.37-.1 22.92-69.61z"/>
  9. </svg>

An SVG file is an image saved as text: a list of shapes, each with its place and color, that any web browser draws sharp at any size. SVG stands for Scalable Vector Graphics, the W3C's open format since 2001, saved with the .svg extension. Logos, icons and cut files use it; a photo stays a JPG or a PNG. A browser opens one, a text editor or Inkscape edits it, and a converter makes one from any image.

Updated 8 sources ↓

The definition

What is an SVG file?

An image saved as text. Each line of the file is one shape: where it sits, how big it is, its color. A browser reads the lines and draws the picture again at whatever size it is shown, so it stays sharp.

The badge at the top of this page is a real one, its whole file. Up close, the picture it was made from shows its pixels; the SVG shows clean edges.

Original
2,048 pxthe WebP as uploaded, its own pixels
VecSnap
36anchor points in the whole file

The name

What does SVG stand for?

Scalable Vector Graphics: scalable because it is drawn again at every size, vector because it is made of shapes. The W3C, which sets the web's standards, published it in 2001.

Its uses

What is an SVG file used for?

For anything drawn: logos, icons, illustrations and the paths a cutting machine follows. A photo stays a JPG or a PNG.

  • Logos

    Why an SVG
    One file serves the website, the sign and the card, its colors editable
    Or else
    A PDF for a print shop

  • Icons on a site or an app

    Why an SVG
    A few hundred bytes each, sharp on every screen, colored from the page's CSS
    Or else
    An icon font

  • Cutting and engraving

    Why an SVG
    A vinyl cutter or a laser follows its paths
    Or else
    DXF, for laser software

  • Illustrations

    Why an SVG
    Grows to a poster with no new export
    Or else
    A PDF

  • Photos

    Why an SVG
    A poor fit: light and texture are pixels
    Or else
    A JPG, a PNG or a WebP

Opening one

How do I open an SVG file?

Drag it onto any web browser. To change its shapes, open it in a vector editor such as Inkscape, which is free.

  • Any computer or phone

    To see it
    A web browser: Chrome, Safari, Edge or Firefox
    To change it
    A vector editor, such as Inkscape

  • Windows File Explorer

    To see it
    A preview, once Microsoft's PowerToys add-on is on
    To change it
    Inkscape opens it

  • A text editor

    To see it
    Its lines, as at the top of this page
    To change it
    A color or a size, by hand

Making one

How do I make an SVG file?

Convert an image you already have, draw one in a vector editor, or export one from a design app. A converted file is only as good as its shapes, so look at it up close.
  • From an imageConvert it
    • Drop a PNG, a JPG or a WebP on a converter
    • VecSnap draws it again as shapes, with few anchor points
    • Converting and previewing are free
    SVG converter
  • From scratchDraw it
    • Inkscape is free and open source
    • It saves SVG as its main format
    • Every edge is placed by you
  • From a designExport it
    • Figma exports a layer or a frame as SVG
    • Its text is exported as outlines by default
    • Check that no photo inside is saved as pixels

Try it

What does my image look like as an SVG?

Drop it here: VecSnap draws it again as shapes, and shows you every one and every anchor point before you keep the file.
OriginalVecSnap
Anchor points
VecSnap 36, potrace 4,05199.1% fewer
File size
VecSnap 0.80 KB, potrace 135 KB99.4% lighter

No image at hand? Try one of ours

Now yours: drop an image

See it as an SVG, shape by shape. Converting and previewing are free.

Editing one

How do I edit an SVG file?

Move its shapes in a vector editor, or change the text itself: a color is one word in the file. Try it on the badge.

Pick a color: the drawing and the two lines that hold it change together.

vecsnap.svg0.80 KB · 36 anchor points
  1. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048">
  2. <rect width="2048" height="2048" fill="#f6eede"/>
  3. <circle cx="1024.08" cy="1023.82" r="627.15" fill="#22314b"/>
  4. <path fill="#f3c563" d="M1428.73 1297.27l-809.41.01-12.41-19.67c-125.17-203.82-82.18-466.41 97.16-621.96 231.06-200.4 579-142.89 737.71 115.66a483.37 483.37 0 0 1 .41 505.09l-13.46 20.87z"/>
  5. <path fill="#f3c563" d="M658.54 1347.21l730.99-.01q-29.99 32.64-49.89 49.2H708.71a684.61 684.61 0 0 1-50.17-49.19z"/>
  6. <path fill="#f3c563" d="M779.97 1446.41l488.24.07-17.68 9.76c-144.51 76.51-311.67 75.5-455.64-1.48l-14.92-8.35z"/>
  7. <circle cx="1024.05" cy="1023.97" r="217.99" fill="#f16b50"/>
  8. <path fill="#f16b50" d="M1024.07 578.7l22.73 69.58 72.49.11-58.71 43.25 22.84 70.15-59.3-43.66-59.7 43.77 23.06-70.24-58.7-43.25 72.37-.1 22.92-69.61z"/>
  9. </svg>
Repaint the coral

Questions

SVG files, answered.

Sources

Yes: it is the web's own vector format, unless someone saved a picture's pixels inside it.

What is a vector file?

More guides

Keep reading

Favicon size and format

Sizes, formats and the HTML, shown on one icon in a tab, a search result and a home screen.

Guide · 5 min read

What is a vector file?

What one is, its formats, and how to tell a real one from pixels.

Guide · 3 min read

Image Trace in Illustrator, step by step

The steps, the settings and Expand, and what to do when Image Trace is grayed out.

Guide · 3 min read

How to change a logo's color

Change a logo's colors, make a white or a black version, and why a recolored PNG grows a halo.

Guide · 4 min read

How to fix a pixelated logo

Why a logo pixelates, the pixels each place asks for, and the fixes, shown on one small JPEG.

Guide · 5 min read

SVG viewBox, width and height

The viewBox, width and height, a responsive SVG, and why yours will not scale, shown on one file.

Guide · 4 min read

SVG vs PNG

Which format each job needs, shown on one drawing saved both ways.

Guide · 3 min read

How to change an SVG's color

Recolor an SVG in its text, with CSS or currentColor, and why one in an img tag will not change.

Guide · 4 min read

How to add a sticker border

A white edge and a smooth cut line, in Cricut, Illustrator, Inkscape or one step.

Guide · 5 min read

Inkscape Trace Bitmap, step by step

The steps, the modes and the settings, and what Trace Bitmap leaves on a real PNG.

Guide · 4 min read

How to vectorize an image in Photoshop

Make Work Path, color by color, and where it stops: what Photoshop can vectorize.

Guide · 4 min read

SVG vs EPS

What differs, which to send a printer, and one logo opened both ways.

Guide · 3 min read

How to vectorize an image in Canva

Canva's own apps, why a PNG saved as an SVG stays pixels, and an SVG you can recolor in Canva.

Guide · 4 min read

How to turn a Procreate drawing into a vector

Procreate shares no vector file: export the PNG that converts best, and draw for it.

Guide · 2 min read

How to make an SVG for Cricut

Why Design Space wants an SVG, and how to make one with a layer for each color.

Guide · 4 min read

Image Trace in Affinity, step by step

The steps, the two settings, where it is, and why traced corners come out round.

Guide · 4 min read

How to make an SVG for laser cutting

Why a traced SVG engraves some areas twice, and the file each laser app wants.

Guide · 5 min read

How to vectorize an image in Figma

Figma's own Vectorize, how to import or paste an SVG, and what makes a file easy to edit there.

Guide · 3 min read

How to reduce anchor points

Why a traced SVG has thousands, what they cost, and how to keep only the few a shape needs.

Guide · 2 min read

Drop an image. Check the file.

Converting is free. You see the whole result before you spend anything.