What is SVG?
Learn how SVG is styled with CSS.
What is SVG?
SVG (Scalable Vector Graphics) is a vector graphic format for the web. Instead of pixels, it uses paths, lines and geometric shapes. It never pixelates: scale a tiny icon up to a giant banner and it stays sharp on every screen.
It is ideal for logos, icons and simple illustrations. Better yet, it is part of HTML: you can reach its elements with CSS and style them just like a paragraph or a button.
Inline SVG
You can put an SVG into a page two ways: call an external file with <img src="logo.svg"> or embed it directly in the HTML. The second is called inline SVG.
The difference is large. An external file behaves like an image: CSS cannot reach its inner elements. With inline SVG, every element — circle, path, rect — is reachable: you change its color, thickness and visibility.
SVG elements
An SVG drawing is built from small elements. circle draws a circle, rect a rectangle, line a straight line. For free-form shapes you use path.
Each element has geometric attributes: cx and cy set the center, r the radius, x and y the corner. These attributes draw the shape; CSS sets its color, stroke width and visibility.
Exercise Write your first SVG circle
Open an <svg> tag with a viewBox attribute set to 0 0 100 100. Add a <circle> element inside with cx, cy and r attributes set to 50, 50 and 40.
Show example solution
open the svg tag with viewBox="0 0 100 100", then add <circle cx="50" cy="50" r="40"/> inside.
Example solution:
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40"/>
</svg>Test yourself
-
What is a key trait of SVG?
- It paints pixels one by one
- It stays sharp when scaled
- It is only for photos
- It cannot open in a browser
Show answer
It stays sharp when scaled — Correct! SVG is vector, so it never pixelates when scaled.
-
Complete the SVG tag
<____ class="logo" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>Show answer
<svg class="logo" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg> -
Match the SVG concepts
- SVG
- vector graphic format
- inline SVG
- HTML-embedded SVG
- circle
- circle element
- viewBox
- coordinate system