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

Next lesson: Fill and stroke

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies