{"id":171660,"date":"2014-06-03T11:22:58","date_gmt":"2014-06-03T18:22:58","guid":{"rendered":"http:\/\/css-tricks.com\/?p=171660"},"modified":"2022-11-14T07:15:52","modified_gmt":"2022-11-14T15:15:52","slug":"svg-symbol-good-choice-icons","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/svg-symbol-good-choice-icons\/","title":{"rendered":"SVG symbol a Good Choice for Icons"},"content":{"rendered":"
Looking for a better way to do SVG icons? Inline SVG might be your best bet, which you can learn about in this more recent post<\/a>.<\/p>\n You could design an icon set where the icons all had the exact same aspect ratio. But that’s probably not typically going to be the case. The container around a little beaker icon might be tall and narrow. The container around a little fish perhaps short and long. You probably shouldn’t have to think too much about that, but unfortunately you kinda have to when you use an SVG icon system<\/a> as I’ve described in the past, because you need to use the An improvement is to use the An example is in order.<\/p>\n <\/p>\n Here’s two icons with very different aspect ratios, as you can tell from the artboard in Illustrator.<\/p>\nviewBox<\/code> attribute to describe that container\/aspect ratio.<\/p>\n
<\/code> element in SVG instead of directly referencing shapes (or a
<\/code>), because you can define the
viewBox<\/code> directly on the
<\/code> and then not need one when you
<\/code> it later in an
<\/code>.<\/p>\n