Transloadit

What is SVG?

Scalable Vector Graphics (SVG) is an XML-based format for two-dimensional vector graphics, text, styling, animation, and interactivity. Its geometric elements can scale without raster-resolution loss.

How SVG works

An SVG document is an XML tree of shapes, paths, text, paint rules, transforms, and references that a renderer resolves into a two-dimensional scene. Geometry remains editable and resolution-independent, although embedded raster images and filter effects still have finite sampling costs. SVG can be used as an image resource or integrated into a document, and those modes expose different scripting, styling, and linking behavior. It fits authoring, optimization, delivery, and raster-derivative generation for diagrams, icons, and illustrations.

Key facts

  1. viewBox takes four numbers (min-x, min-y, width, height) that define which rectangle of the drawing’s own coordinates is mapped onto the display area, independently of the displayed width and height. With the default preserveAspectRatio of xMidYMid meet, that rectangle is scaled uniformly, kept entirely visible, and centered. A viewBox that does not match the artwork’s extent therefore shows it off-center, shrunken, or surrounded by empty space at every rendered size.
  2. How an SVG is loaded decides what it may do. SVG 2 expects a file used in place of a raster image, such as through an HTML img element or a CSS image property, to run in a restricted mode with no script execution, no external references, and no interactivity, and MDN lists matching limits that browsers apply. Inline SVG, and SVG embedded as a document through iframe, object, or embed, is not restricted this way, so it can be scripted and styled by the page.
  3. An uploaded SVG is a document that can carry executable script, not only a picture. The image-context limits do not apply when the file is opened directly, so a user-supplied SVG served from your own domain can run its script there. The SVG media type registration also warns that maliciously constructed XML entities can exhaust memory in XML processors. Sanitize or rasterize untrusted SVG before serving it, and treat server-side parsing as untrusted input handling.
  4. Text in SVG stays as characters, so it can be searched, selected, and read by assistive technology, but SVG 2 notes that proper rendering may depend on having the font used during authoring. A font the file references by URL is an external resource, which image contexts do not load unless it is inlined as a data: URL. Converting text to paths fixes the appearance and gives up those text properties.

When SVG matters

Use SVG for resolution-independent icons, logos, and diagrams when browser or tool support matches the required features. Sanitize untrusted files because SVG can contain scripts, links, and other active content.

How Transloadit helps with SVG

Transloadit’s image formats data for /image/resize, /image/enhance, and /document/thumbs lists SVG and SVGZ as readable and writable on both listed ImageMagick stacks, and /image/resize writes the format named in its format parameter, which is the documented route for producing a raster derivative such as a PNG from an SVG upload.

When format is left unset, the documentation says the input format is used for the output. The formats data does not say which SVG features the renderer honors, such as external references, fonts, or filters. No Assembly was run for this entry; test with your own files.

Explore Transloadit’s file formats & compression capabilities

Sources

Turn media knowledge into a working pipeline

Connect uploads, processing, AI, storage, and delivery through one declarative API — with the encoding stack, scaling, and format churn handled for you.

Try Transloadit for free