What is an SVG file? Everything you need to know about the SVG format

An SVG file describes two-dimensional graphics with XML-based markup. Unlike JPEG or PNG, SVG is a vector format: it stores shapes, paths, text, gradients, and transforms rather than a fixed grid of pixels. A well-formed SVG can scale from an icon to a billboard without becoming blurry.

How does SVG work?

An SVG document contains elements such as <path>, <circle>, <text>, and <image>. A browser or renderer interprets those instructions at the requested display size. CSS can style elements, and SVG can include links, filters, animation, scripts, or external resources.

That flexibility is powerful, but it means untrusted SVG uploads should be treated as active content rather than harmless pixels.

Benefits of SVG

Resolution independence: remains sharp at any size or pixel density.
Small geometric assets: logos and icons can be smaller than raster equivalents.
Editable structure: colors, text, and shapes can be changed without repainting pixels.
Accessible content: meaningful titles and text can be represented in the document.
Animation and styling: integrates with web layout and CSS.

Limitations and security considerations

SVG is inefficient for detailed photographs. Complex paths and effects can also be expensive to render. Because SVG may contain scripts, event handlers, links, and external references, do not inject an untrusted upload directly into an HTML document without sanitizing or rasterizing it.

Use PNG, WebP, or AVIF when you need a predictable pixel image or a safe delivery derivative.

SVG compared with PNG

Format	Best fit	Scaling	Content model
SVG	Logos, icons, diagrams, illustrations	Lossless at any size	XML vector instructions
PNG	Screenshots and pixel art	Resampling required	Fixed raster pixels

How to rasterize SVG files with Transloadit

🤖/image/resize can render an uploaded SVG into a predictable PNG at the dimensions your product needs:

{
  "steps": {
    ":original": { "robot": "/upload/handle" },
    "png": {
      "use": ":original",
      "robot": "/image/resize",
      "format": "png",
      "width": 1200,
      "height": 1200,
      "resize_strategy": "fit"
    }
  }
}

SVG FAQ

Is SVG an image format or a document format?

It is an image format represented as an XML document. That document structure is why SVG can include more behavior than a raster image.

Can SVG contain JavaScript?

Yes. SVG can contain active content, so sanitize or rasterize uploads before embedding untrusted SVG inside a page.

Should photographs be converted to SVG?

No. SVG is suited to shapes and illustrations. Use JPEG, WebP, or AVIF for photographic content.