SVGs (Scalable Vector Graphics) is well-accepted as an ideal format for two-dimensional graphics on the web. Logos, icons, backgrounds, buttons and animated graphics can scale for high-definition displays while maintaining low file-size. There are several ways to implement SVGs within web code. The chosen method depends heavily on what you’re trying to achieve.
SVG Embed Formats
Image: Just as you would with any other image. You can also use SVGs in a <picture> element. Note that this method limits manipulation functionality.
<img src="someimage.svg" alt="Some Name" height="50" width="50">Background-image: Note that this option limits manipulation functionality,
.logo {
background-image: url(somefile.svg);
}Object
<object> is pretty much the best option to use if you want to be able to manipulate an SVG without having to put it inline in your HTML.
<object type="image/svg+xml" data="somefile.svg">Your browser does not support SVGs</object>Inline
Putting your SVG code inline will save an HTTP request but it will mean the image isn’t cached by the browser. It is the easiest way to manipulate, however maintaining inline SVG code can be a headache, and it can bloat file-size.
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 68 65">
<path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
<path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>Iframe
You can load SVGs in an <iframe>. It does let you do most things, but I’m not sure it is the best method to use moving forward
<iframe src="bsomefile.svg">Your browser does not support iframes</iframe>Embed
<embed> is meant to be used to integrate ‘an external application’ or ‘interactive content’. We do not recommend using this method.
<embed type="image/svg+xml" src="bblogo.svg" />To Summarize
Styling SVGs with CSS
To unleash the power of SVGs, where images, and code come together, we recommend you begin with the <Object> approach and connecting your external stylesheet. You need to reference your stylesheet internally from the SVG file.
// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>// In style.css
.firstcircle { fill: black; }
.secondcircle { fill: red; }As an alternative, you can put styles in-line and wrap them in a style tag, but this can be harder to manage.
For a complete guide on managing and manipulating SVGs using CSS, JS and other technologies check out the following resources:
- SVG On The Web
- A Book Apart: A Practical Guide to SVG
- I Know I should Use SVGs But Don’t Know How, A Talk By Colin Lord
And please check our our related articles on Web.Page:
Until next time.
PS. If you have questions about user experience, web design or development post your question to our Ask a Question section and one of our contributors may answer in a post. Thanks!