Add/Embed SVG to Blogger templates

Adding vector graphics to the Web

Vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixellate when zoomed in or blown up to a large size. In this article we'll show you how to include one in your webpage.

Prerequisites:	You should know the basics of HTML and how to insert an image into your document.
Objective:	Learn how to embed an SVG (vector) image into a webpage.

Note: This article doesn't intend to teach you SVG; just what it is, and how to add it to web pages.

Adding SVG to your pages

The quick way: <img>

To embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87"
    width="100" />

Pros

• Quick, familiar image syntax with built-in text equivalent available in the alt attribute.
• You can make the image into a hyperlink easily by nesting the <img> inside an <a> element.

Cons

• You cannot manipulate the image with JavaScript. 
• If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.) 
• You cannot restyle the image with CSS pseudoclasses (like :focus).

How to include SVG code inside your HTML

You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your SVG inline, or inlining SVG. Make sure your SVG code snippet begins and ends with the <svg> </svg> tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document:

<svg width="300" height="200">

    <rect width="100%" height="100%" fill="green" />

</svg>

Pros

• Putting your SVG inline saves an HTTP request, and therefore can reduce your loading time. 
• You can assign classes and ids to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any SVG presentation attribute as a CSS property. 
• Inlining SVG is the only approach that lets you use CSS interactions (like :focus) and CSS animations on your SVG image (even in your regular stylesheet.) 
• You can make SVG markup into a hyperlink by wrapping it in an <a> element.

Cons

• This method is only suitable if you're using the SVG in only one place. Duplication makes for resource-intensive maintenance. 
• Extra SVG code increases the size of your HTML file. 
• The browser cannot cache inline SVG as it would cache regular image assets. 
• You may include fallback in a <foreignObject> element, but browsers that support SVG still download any fallback images. You need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers.

Scalable Vector Graphics | www.w3.org