Chapter 18Canvas & SVG: Using SVG

In modern browsers, SVG can be used anywhere where you would normally use JPGs, GIFs or PNGs. Add to this the ability to add colors and gradients, plus the fact that you get no loss of quality when scaled, and it's something to get excited about for the majority of designers.

Inserting SVG Images on Your Pages

There are several ways to add SVG to your page:

  • The object tag

  • The embed tag

  • Within an iFrame

  • Using a CSS background

  • Inline SVG embedded into your HTML5 page

  • Using an img tag

Important: Use CSS for Repeating Backgrounds

Only CSS can be used for repeating backgrounds. The other methods will just show a single image.

Which Method Should You Use?

That will depend on the project at hand but, generally, ...

Get Jump Start HTML5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial