Tools for the trade<\/h3>\n
While you can create an SVG document using any text editor, a vector illustration application like Adobe Illustrator or Inkscape is usually a better choice (although it should be noted that other apps \u2014 including 3D programs like Blender and server-side apps \u2014 can export SVG too). <\/p>\n
Regardless of what you use, you should be aware that SVG creation from apps can still sometimes leave a bit to be desired: the resulting document is often over-coded, and occasionally poorly formatted. The .svg file can be made smaller, more compact and easier to alter by passing it through an optimizer like SVGOMG<\/a>. Sometimes passing a malformed .svg document through the W3C validator<\/a> can help you spot problems in the drawing.<\/p>\n There are three primary ways that SVG can be used directly on a web page:<\/p>\n Because SVG is based on XML, it can be integrated directly in the code for your page. Inlining the SVG code reduces latency and the overall load time of your page (although this may not continue to have quite the same advantage as the adoption of HTTP2, and its associated advantages in loading, grow over time). It also has the advantage of being directly addressable with CSS and JavaScript.<\/p>\n Just like bitmap images, an SVG file can be referenced from an A slightly older-school approach, but one that allows full CSS and JavaScript interactivity to be retained inside the .svg file, while leaving the code of your page uncluttered. Has the same potential latency issues as the As mentioned, there are a few things vector illustration applications currently don’t do with SVG. While you’ll have to add these features via a code editor, they can make a great addition to your site:<\/p>\n As I mentioned, individual components of SVG can be labeled with an id or class, meaning that they can be manipulated within media queries:<\/p>\n This means that you can turn off and on different features of an SVG illustration at different viewport sizes, creating opportunities for adaptive logos (as shown above) or illustrations that show greater or less detail as the viewport shrinks and expands\u2026 which is entirely suited for responsive design, which is about showing visitors relevant content at an appropriate level of detail for where they are, and what device and screen size they are using, rather than “squishing” the same content down into smaller and smaller spaces.<\/p>\n Check out this adaptive branding module:<\/p>\n See the Pen Adaptive Branding Module: Coca-Cola<\/a> by Dudley Storey (@dudleystorey<\/a>) on CodePen<\/a>.<\/p>\nIntegrating SVG<\/h3>\n
Directly in the code<\/h4>\n
Referenced as an
<img><\/code><\/h4>\n<img><\/code> tag, or via CSS as a background image. This is often the best course of action if the components<\/em> of the SVG don’t need individual attention once the image is presented on the page, since interactive CSS and JavaScript will be nullified by the security restrictions of HTML images. (However, the SVG image as a whole<\/em> can still be manipulated, using CSS or JS on the page itself.)<\/p>\nInserted as an
<object><\/code><\/h4>\n<img><\/code> approach.<\/p>\nAdditions and complications<\/h3>\n
Adaptive SVG<\/h4>\n
@media screen and (max-width: 900px) { path#right { display: none; } }<\/code><\/p>\n![\"Example](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/integratingsvgs-cocacola.png\")
<\/p>\n