# 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](/docs/robots/image-resize.md) can render an uploaded SVG into a predictable PNG at the dimensions your product needs:

```json
{
  "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.

## Related demos

* [Convert SVG to JPEG](/demos/image-processing/convert-an-image-from-svg-to-jpg/)
* [Resize an image for a Twitter cover](/demos/image-processing/resize-to-twitter-cover-dimensions/)
* [Watermark an image](/demos/image-processing/image-watermarking/)