Learn SVG
SVG (Scalable Vector Graphics) is an XML-based markup language for describing two-dimensional vector graphics that stay crisp at any size.
What Is SVG?
SVG stands for Scalable Vector Graphics. It is a text-based image format that describes pictures using mathematical shapes and paths instead of a fixed grid of colored dots. Because an SVG image is really just markup, you can open it in a text editor, generate it with code, style it with CSS, and animate it with JavaScript, none of which is possible with a photograph.
Vector vs. Raster Graphics
Raster formats such as JPEG, PNG, and GIF store an image as a grid of pixels, each with a fixed color. Enlarging a raster image beyond its original resolution stretches those pixels, making the picture blurry or blocky. Vector formats like SVG store an image as a set of geometric instructions, coordinates for lines, curves, and shapes, which a renderer recalculates every time the image is displayed, so the result is sharp whether it fills an icon or a billboard.
- Raster images (PNG, JPG, GIF) are pixel grids with a fixed resolution
- Vector images (SVG) are drawn from mathematical shapes and scale infinitely without blurring
- SVG files often stay small for logos and icons, while photos are better suited to raster formats
- Raster works best for photographs; vector works best for logos, icons, charts, and illustrations
- SVG markup can be styled with CSS and manipulated with JavaScript, unlike a PNG or JPG
SVG Is Built on XML
Every SVG file is a well-formed XML document. That means it uses matching opening and closing tags, nests elements inside a single root element, and requires every attribute value to be quoted. The root element of any SVG document is always <svg>, and everything you draw lives inside it as child elements such as <rect>, <circle>, or <path>.
Example
<!DOCTYPE html>
<html>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<circle cx='100' cy='100' r='80' fill='#4f46e5' />
</svg>
</body>
</html>Example
<!DOCTYPE html>
<html>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160'>
<rect x='10' y='10' width='100' height='60' fill='#0ea5e9' />
<circle cx='180' cy='80' r='50' fill='#f97316' />
<line x1='10' y1='140' x2='230' y2='140' stroke='#334155' stroke-width='4' />
</svg>
</body>
</html>Example
<!DOCTYPE html>
<html>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
<rect x='30' y='30' width='140' height='140' fill='#fef3c7' stroke='#d97706' stroke-width='6' />
</svg>
</body>
</html>Exercise: SVG Introduction
What does the acronym SVG stand for?
Frequently Asked Questions
- When should I use SVG instead of PNG?
- For logos, icons, diagrams and any artwork made of shapes, because SVG stays sharp at every size and usually weighs less. Photographs belong in a raster format, where per-pixel compression works far better.
- Can I style SVG with CSS?
- Yes, when the SVG is inline in the page. Fill, stroke and opacity behave like any other CSS property, and shapes respond to hover and animation. An SVG loaded through an img tag is isolated and cannot be styled from the page.
- Why is my SVG not showing up?
- Usually a missing or wrong viewBox, zero width or height, or shapes drawn outside the visible coordinate area. A fill that matches the background is the other common cause: the shape is there, just invisible.
