Using SVG with CSS3 and HTML5

Chapter 20. Good Manners

Chapter 20. Best Practices for SVG

An image is more than just a collection of details, and a complex SVG document is more than just a series of independent elements and styles. When you are starting a project, it is worthwhile to take some time to plan your approach.

This chapter summarizes some of our best advice for managing SVG on the web. If you are building an important website component using SVG, a little bit of up-front strategy and analysis can help save time and frustration later.

Planning Your Project

Got a great idea for a design, a game, an unusual interface widget? Wonderful! Time to bring it to life!

But before you start writing code—even before you start drawing in Illustrator or Sketch—make a plan. You aren’t just creating a picture, you’re building a product. It needs to work for your end users, and it needs to be maintainable and adaptable for future design changes.

Does Your Project Need SVG at All?

It may seem strange to ask this question in a book devoted to SVG, but, as much as we love vector graphics, we also understand that it isn’t applicable to absolutely everything in web design and development.

If your diagram can be represented as colored squares on a web page, it’s usually easier to create it using HTML elements with a little CSS, rather than using an inline SVG. You can even make the elements quickly scalable by using % or vw units for width and height.

When SVG first became available in web browsers, it replaced 1px-wide ...