SVG

Definition

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional based vector graphics. They can be embedded directly into HTML.

Explain Like I'm New

Unlike a JPEG (which is made of colored pixels), an SVG is made of math. The HTML code literally tells the browser 'Draw a circle here with a radius of 50'. Because it's math, you can zoom in infinitely, and it will never, ever get blurry.

Real World Example

Company logos and small icons (like a magnifying glass for a search bar). SVGs are incredibly small file sizes and scale perfectly to any screen size.

Common Use Cases

•Logos
•Icons
•Interactive maps

Interactive Example

Interview Questions

basic

What does SVG stand for?

intermediate

Why would you use an SVG instead of a PNG for a logo?

Flash Cards

Question

What does it stand for?

Click to reveal answer

Answer

Scalable Vector Graphics.

Question

SVG vs PNG?

Click to reveal answer

Answer

If you put a 100x100 PNG logo on a giant 4K monitor, it looks terrible and pixelated. An SVG uses math to redraw itself perfectly crisp at any resolution. Plus, SVGs are usually smaller files, so they load faster.