SVG - The Vector Image

Use SVG images to design Blogger blog & give visitors the vector experience.

• SVG is Scalable Vector Graphics which resized at any resolution.
• SVG graphic files are pure XML.
• Use SVG instead of Font Awesome  icon to make site faster.
• Use anywhere in Blogger posts, widgets & template.

Note: No uploading is required!

Use SVG in Blogger

SVG begins with <svg> which contain height to control size, viewbox to control image ratio. Path contain the d (data) element which is the main graphics.

<svg  height="32" viewbox="0 0 32 32"><path d="M27.4,18.3L16,6.5L4.6,18.3V32h8.9v-9.6h5.1V32h8.9C27.4,32,27.4,18.3,27.4,18.3z M27.4,11V0.1h-5v5.6L16,0 L0,16.1l1.8,2.7L16,4.3l14.2,14.5l1.8-2.7L27.4,11z"/>Home</svg>

Inline Styling

Use fill to set background color, stroke to set outline color & stroke-width to set width of outline.

<svg height="42" viewBox="0 0 32 32"><path fill="#3b5998" stroke="black" stroke-width="1"  d="M0,0v32h17.1V19.6h-4.2v-4.8h4.2v-3.6c0-2,0.6-3.6,1.7-4.7c1.1-1.1,2.6-1.7,4.5-1.7c1.6,0,2.8,0.1,3.7,0.2v4.3l-2.5,0 c-0.9,0-1.6,0.2-1.9,0.6c-0.3,0.4-0.5,1-0.5,1.7v3.1h4.8l-0.6,4.8h-4.1V32l9.9,0V0H0z" />Facebook</svg>

Also working like style="fill: blue; stroke: pink; stroke-width: 5; opacity: 0.5" in path tag.

CSS Styling

Use CSS to style SVG image.

<style>
.svg-twitter { height: 40px; }
.path-twitter {fill: gray; fill-opacity:0.1; stroke: DeepSkyBlue; stroke-width: 0.5;}
svg:hover .path-twitter { fill: #55acee; fill-opacity:1; stroke-opacity:1; }
</style>

<svg class="svg-twitter" viewBox="0 0 32 32"><path class="path-twitter"  d="M0,0v32h32V0H0z M15.33,20h5.33c1.47,0,2.67,1.19,2.67,2.67c0,1.47-1.19,2.67-2.67,2.67H14c-2.95,0-5.33-2.39-5.33-5.33 V8.67C8.67,7.19,9.86,6,11.33,6S14,7.19,14,8.67v2.67h6.67c1.47,0,2.67,1.19,2.67,2.67s-1.19,2.67-2.67,2.67H14v2 C14,19.4,14.6,20,15.33,20z" />Twitter</svg>

Working hover css in a link is a svg:hover .path-twitter

Get Path D for SVG

1. Download a SVG image. For SVG icon use IcoMono
2. Open SVG file using notepad.
3. Copy the viewBox & Path D value
4. And past as like below.

<svg height="42" viewBox="Past viewBox Value"><path d="Past D Value" />Name</svg>

Marge Path D for SVG

1. If SVG file contain multiple Path D value then Open with Adobe Ilustrator.
2. Press Ctrl+A to select all & Ctrl+8 to make compound path.
3. To recolor individual object use direct selection tool (Press A)
4. Press Ctrl+S to save it.

<svg height="51px" viewbox="0 0 514.768 514.766">
 <path d="M198.602,6.733c-61.081,14.269-113.787,50.292-149.529,99.45h248.979L198.602,6.733z" id="path-0">
 <path d="M316.165,508.032c61.081-14.27,113.786-50.291,149.528-99.449H216.715L316.165,508.032z" id="path-1">
 </path></path></svg>