HTML SVG

Scalable vector graphics inside HTML.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

SVG (Scalable Vector Graphics) describes shapes in XML. SVG graphics stay sharp at any size, which makes them ideal for icons, logos and diagrams.

Basic shapes

<rect>, <circle>, <ellipse>, <line>, <polygon>
<text> for text and <path> for any shape.

SVG vs Canvas

SVG elements are part of the page, so each shape can be styled with CSS and react to events. Canvas is a bitmap: faster for many objects, but shapes are not separate elements.

Key Takeaways: HTML SVG

Mastering HTML SVG helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML SVG Code Example

HTML

<svg width="320" height="160">
  <rect x="10" y="10" width="120" height="80" rx="12" fill="#2563EB" />
  <circle cx="220" cy="60" r="45" fill="#14B8A6" stroke="#071A2F" stroke-width="4" />
  <polygon points="60,150 90,105 120,150" fill="#EAB308" />
  <text x="150" y="145" font-family="Arial" font-size="18" fill="#071A2F">Sharp at any size</text>
</svg>

Free sign-in required · Google login available

HTML SVG Practice Exercises

Check what you learned in “HTML SVG”.

/ 3 solved

Fill in the blank

Draw a circle in SVG.

<svg width="100" height="100">
  < cx="50" cy="50" r="40" fill="teal" />
</svg>

✓ Correct! Not quite. Try again.

Multiple choice

What is the main advantage of SVG graphics?

They stay sharp at any size They load only on phones They cannot be styled They are always animated

✓ Correct! Not quite. Try again.

Code challenge

Inside the SVG, draw a <rect> that is 100 wide and 50 high.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

❮ Previous

HTML Canvas

Next ❯

HTML Media: Video & Audio

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services