SVG is a lightweight vector image format that’s used to display a variety of graphics on the Web and other environments with support for interactivity and animation. In this article, we’ll explore the various ways to use CSS with SVG, and ways to include SVGs in a web page and manipulate them.
The Scalable Vector Graphic (SVG) format has been an open standard since 1999, but browser usage became practical in 2011 following the release of Internet Explorer 9. Today, SVG is well supported across all browsers, although more advanced features can vary.
Bitmap image formats such as WebP, PNG, JPG, and GIF define the color of individual pixels. A
100 PNG image requires 10,000 pixels. Each pixel requires four bytes for red, green, blue and transparency, so the resulting file is 40,000 bytes (plus a little more for metadata). Compression is applied to reduce the file size: PNG and GIF use ZIP-like lossless compression, while JPG is lossy and removes less noticeable details (WebP can use either method).
Bitmaps are ideal for photographs and more complex images, but definition is lost as images are enlarged.
SVGs are vector images defined in XML. Points, lines, curves, paths, ellipses, rectangles, text, etc. are drawn on an SVG canvas. For example:
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="250" stroke-width="20" stroke="#f00" fill="#ff0" /> </svg>
viewBox defines a co-ordinate space. In this example, an
600 area starting at position
0,0 has a yellow circle with a red border and a
250 unit radius drawn in the center:
These are the benefits of vectors over bitmaps:
- the SVG above uses fewer than 150 bytes, which is considerably smaller than an equivalent PNG or JPG
- SVG backgrounds are transparent by default
- the image can scale to any size without losing quality
- in terms of accessibility and SEO, text and drawing elements are machine and human-readable.
SVG images are ideal for logos, charts, icons, and simpler diagrams. Only photographs are generally impractical, although SVGs have been used for lazy-loading placeholders.
It’s useful to understand the basics of SVG drawing, but you’ll soon want to create more complex shapes with an editor that can generate the code. Options include:
- Adobe Illustrator (commercial)
- Affinity Designer (commercial)
- Sketch (commercial)
- Inkscape (open source)
- Gravit Designer (commercial with free plan, online)
- Vectr (free, online)
- SVG-Edit ( open source, online)
- Boxy SVG (commercial, online but Blink browsers only)
- Vecteezy (commercial with free plan, online but Blink browsers only)
Each tool has different strengths, and you’ll get differing results for seemingly identical images. In general, more complex images require more complex software.
The resulting code can usually be simplified and minimized further using SVGO (plugins are available for most build tools), or Jake Archibold’s SVGOMG interactive tool.
SVGs as Static Images
When used within an HTML
<img> tag or CSS
background-url, SVGs act identically to bitmaps:
<!-- HTML image --> <img src="http://www.sitepoint.com/myimage.svg" alt="a vector graphic" />
/* CSS background */ .myelement background-image: url("mybackground.svg");
The browser will disable any scripts, links, and other interactive features embedded into the SVG file. You can manipulate that SVG using CSS in an identical way to other images using
filters, etc. The results are often superior to bitmaps because SVGs can be infinitely scaled.
CSS Inlined SVG Backgrounds
An SVG can be inlined directly in CSS code as a background image. This can be ideal for smaller, reusable icons and avoids additional HTTP requests. For example:
.mysvgbackground background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat;
Standard UTF-8 text encoding (rather than base64) can be used, so it’s easier to edit the SVG image if necessary.
The process is usually more practical using a tool such as the PostCSS assets plugin.
CSS with SVG: Responsive SVG Images
When creating a responsive website, images are often sized to the width of their container or the image itself (whichever is smaller). This is achieved in CSS using:
img display: block; max-width: 100%; height: auto;
However, an SVG used in an
<img> tag may have no implicit dimensions. You might discover the
max-width is calculated as zero and the image disappears entirely. To fix the problem, ensure a default
height is defined in the
<svg xmlns="https://www.w3.org/2000/svg" width="400" height="300">
HTML-inlined SVG Images
<p>SVG is inlined directly into the HTML:</p> <svg id="invader" xmlns="https://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8"> <path d="M70.9 35.4v17.8h17.7V35.4H70.9zm17.7 17.8v17.7H70.9v17.7H53.2V53.2H35.4V124h17.8v17.7h17.7v17.7h17.7v-17.7h88.6v17.7h17.7v-17.7h17.7V124h17.7V53.2h-17.7v35.4h-17.7V70.9h-17.7V53.2h-17.8v17.7H106.3V53.2H88.6zm88.6 0h17.7V35.4h-17.7v17.8zm17.7 106.2v17.8h17.7v-17.8h-17.7zm-124 0H53.2v17.8h17.7v-17.8zm17.7-70.8h17.7v17.7H88.6V88.6zm70.8 0h17.8v17.7h-17.8V88.6z"/> <path d="M319 35.4v17.8h17.6V35.4H319zm17.6 17.8v17.7H319v17.7h-17.7v17.7h-17.7V159.4h17.7V124h17.7v35.4h17.7v-17.7H425.2v17.7h17.7V124h17.7v35.4h17.7V106.3h-17.7V88.6H443V70.9h-17.7V53.2h-17.7v17.7h-53.2V53.2h-17.7zm88.6 0h17.7V35.4h-17.7v17.8zm0 106.2h-35.5v17.8h35.5v-17.8zm-88.6 0v17.8h35.5v-17.8h-35.5zm0-70.8h17.7v17.7h-17.7V88.6zm70.9 0h17.7v17.7h-17.7V88.6z"/> </svg> <p>The SVG is now part of the DOM.</p>
In this case,
height attributes are not necessary because the dimensions can be directly controlled. For example:
#invader display: block; width: 200px; height: auto; #invader path stroke-width: 0; fill: #080;
However, adding the dimensions ensures the SVG is not sized inappropriately when CSS is not applied.
SVG elements such as paths, circles, rectangles etc. can be targeted by CSS selectors and have the styling modified using standard SVG attributes as CSS properties. For example:
/* CSS styling for all SVG circles */ circle stroke-width: 20; stroke: #f00; fill: #ff0;
This overrides any attributes defined within the SVG because the CSS has a higher specificity. SVG CSS styling offers several benefits:
- attribute-based styling can be removed from the SVG entirely to reduce the page weight
- CSS styling can be reused across any number of SVGs on any number of pages
- the whole SVG or individual elements of the image can have CSS effects applied using
CSS with SVG: Real World Usage