What is a SVG image?
Short answer
SVG is an XML format for vector graphics: shapes, paths, text, gradients and filters, sized by width, height and a viewBox. Browsers render it directly and many tools convert it to PNG or PDF.
SVG files from the wild mix SVG 1.1 and SVG 2: xlink:href, DOCTYPE declarations, style blocks, data URIs. Sanitisers and converters need to handle all of them.
Anatomy of a SVG image
<svg viewBox="…">The root, with the coordinate system<defs>Gradients, patterns and filters to reuse<rect> <circle> <path>Shapes<image href="data:…">An embedded raster image<style>CSS inside the file
What you can generate
- Up to 100,000 extra shapes for performance tests
- Gradient, checkerboard pattern, colour bars or feTurbulence noise
- viewBox only, without width and height
- Embedded PNG as a data URI
- CSS <style> block, xlink:href, DOCTYPE and comments
- Unicode text
How to make one
- Open the SVG image generator, or start from a preset above.
- Set the size and switch on the edge cases you need; the preview and size estimate follow every change.
- Generate, then download. The file is made in your browser, and the same preset and seed always give you the same file.
Questions
No. There are no script elements or event handlers, so the files are safe to open.
Yes. The tests parse every file with a strict XML parser.