What is SVG?

SVG stands for Scalable Vector Graphics. Unlike raster image formats such as PNG or JPEG, which store images as grids of pixels, SVG describes images using mathematical shapes — lines, curves, circles, and paths — defined in plain XML text. The result is an image that can be rendered at any size, from a 16×16 favicon to a 10,000-pixel billboard, without any loss of sharpness or quality.

SVG was developed by the World Wide Web Consortium (W3C) and first proposed in 1999. The SVG 1.1 specification became a W3C Recommendation in 2003 and remains the widely-deployed standard today. SVG 2.0 is an ongoing W3C specification that adds features including better text layout, new paint server types, and closer alignment with CSS.

Because SVG files are plain XML text, they are human-readable, editable in any text editor, crawlable by search engines, and accessible to screen readers — advantages that no raster format can match.

Technical Specifications

File Structure & Syntax

An SVG file is an XML document. At minimum it needs a root <svg> element with the W3C namespace declaration and a viewBox attribute. Everything inside is standard XML — tags are case-sensitive, all attributes must be quoted, and every opened tag must be closed.

<!-- Minimal valid SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
     width="100" height="100">
  <!-- A blue circle -->
  <circle cx="50" cy="50" r="40"
           fill="#2563eb" stroke="#1e40af" stroke-width="2"/>
  <!-- Centered white label -->
  <text x="50" y="55"
        text-anchor="middle"
        font-family="sans-serif"
        font-size="14" fill="white">Hello</text>
</svg>

Common SVG Attributes

SVG Element Types

SVG provides a rich vocabulary of elements for drawing shapes, rendering text, grouping content, applying effects, and controlling reuse.

Basic Shapes

Paths

The <path> element is the most powerful shape in SVG. Its d attribute accepts a mini-language of commands: M (move to), L (line to), C (cubic bezier), Q (quadratic bezier), A (arc), and Z (close path). Uppercase commands use absolute coordinates; lowercase use relative.

<!-- A simple arrow using path commands -->
<path d="M 10 50 L 80 50 M 65 35 L 80 50 L 65 65"
      stroke="#16a34a" stroke-width="4"
      fill="none" stroke-linecap="round"/>

Text Elements

Structure & Reuse

Paint Servers & Filters

Animation Elements

Coordinate System & viewBox

SVG uses a Cartesian coordinate system where the origin (0, 0) is at the top-left corner. X increases to the right; Y increases downward. The viewBox attribute is what makes SVG truly scalable.

<!-- viewBox="min-x min-y width height" -->
<!-- This SVG uses 0–200 internally but renders at any CSS size -->
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 100"
     width="100%">
  <!-- Shapes use 0-200 / 0-100 coordinates -->
  <rect x="10" y="10" width="180" height="80"
        rx="8" fill="#dcfce7" stroke="#22c55e"/>
</svg>

Without viewBox, the SVG renders at the pixel dimensions specified by width and height and will not scale. With viewBox, the SVG can be set to width="100%" and will fill any container at perfect sharpness.

The preserveAspectRatio attribute controls what happens when the viewBox aspect ratio doesn't match the container. The default, xMidYMid meet, centers and scales uniformly (letterboxing). Use none to stretch, or xMidYMid slice to crop-fill like CSS background-size: cover.

SVG vs. PNG vs. WebP vs. GIF

Choosing the right format comes down to what kind of image you have and how it will be used. SVG is unmatched for graphics defined by shapes; raster formats win for photographs and camera imagery.

When to Use SVG (and When Not To)

Browser & Platform Support

SVG 1.1 is supported in all modern browsers and has been since Internet Explorer 9 (released 2011). CSS animations and transitions work in all evergreen browsers. SMIL animation support dropped in Blink-based browsers (Chrome/Edge) for a period but has since been retained. JavaScript DOM manipulation of inline SVG works everywhere modern.

Creating & Editing SVG Files

SVG can be created by hand in any text editor, exported from a vector design application, or generated programmatically by code. Each approach has its place.

Design Tools (GUI)

Code & Libraries

Optimizing SVG

Design tools export SVG with editor metadata, unused definitions, verbose decimal precision, and attribute duplication that inflates file size. Always optimize before deploying.

Converting SVG Files

SVG to PNG / JPEG (Rasterizing)

Converting SVG to a raster format is called rasterizing. You'll want to do this when you need a fixed-size image for a context that doesn't support SVG — such as email, Open Graph (social share) images, app store screenshots, or Microsoft Office.

PNG / Illustrator / Other Formats to SVG (Vectorizing)

Converting a raster image to SVG is called vectorizing or auto-tracing. Results vary dramatically based on the complexity and content of the source image. Simple flat-color logos trace well; photographs generally do not.

SVG Tools on Flipper File

Work with SVG files directly in your browser — no upload, no account required.

Frequently Asked Questions