EMZETT.
Login

Emzett Wiki

SVG: Vector graphics on the web

Properties1
tagsglossar, web, grafik

2 min read

SVG: Vector graphics on the web

In short: SVG describes graphics as text with shapes and lines instead of pixels, so they stay sharp at any size and can be styled with CSS and JavaScript.

In more detail: Pixel images (JPEG, PNG) have a fixed resolution and become blurry when enlarged. SVG (Scalable Vector Graphics) instead stores instructions: “Draw a circle at (50,50) with radius 40.” It is an XML format that browsers display directly.

In Depth

A simple example

<svg viewBox="0 0 100 100" width="120" height="120" role="img" aria-label="Red circle with star">
  <circle cx="50" cy="50" r="40" fill="#e11d48" />
  <path d="M50 20 L58 42 L82 42 L62 56 L70 80 L50 65 L30 80 L38 56 L18 42 L42 42 Z" fill="white" />
</svg>

The viewBox defines a coordinate system of its own that scales to any size. Basic shapes: rect, circle, ellipse, line, polyline, polygon, path (arbitrary curves), text, groups g.

Advantages

  • Scalable without loss of quality, ideal for logos, icons, charts and illustrations on all screens.
  • Often very small, especially with simple shapes.
  • Can be coloured and animated with CSS (fill, stroke, transitions), made interactive with JavaScript.
  • Text in SVG is searchable and can be read aloud by screen readers if you set labels.
  • Exported by design tools (Figma, Inkscape, Illustrator).

Embedding

  • <img src="image.svg">: like an image, simple, no styling from outside.
  • Inline in the HTML: full control through CSS/JS but more markup.
  • As a CSS background (background-image) or <symbol> sprite with <use>. For colour changes matching the theme use fill="currentColor" so the icon takes over the text colour.

Limits and security

For photos pixel formats (JPEG, WebP, AVIF) are suitable; SVG becomes large and slow for very complex motifs. SVG can contain scripts: never embed foreign SVG files inline unchecked and sanitise uploaded SVGs (XSS risk); embedded as <img>, scripts are not executed. Optimise files with SVGO and give meaningful graphics a text (title, aria-label).

See also: CSS, HTML, Accessible websites, XSS

Backlinks