Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is a powerful, XML-based markup language used for creating two-dimensional vector graphics. It’s a widely adopted technology in web development because it allows graphics to scale up or down without losing quality, making it ideal for responsive design. SVG files are text-based, making them lightweight and easy to manipulate through CSS or JavaScript.

In this chapter, we’ll explore SVG from its basics to advanced usage, providing examples with thorough explanations and output demonstrations.

What is SVG ?

SVG stands for Scalable Vector Graphics. Unlike raster images (JPEG, PNG), which are made of pixels, SVG images are made of vectors—geometric shapes like points, lines, and curves. Because they are vector-based, they can scale indefinitely without losing clarity.

Key Features of SVG

  • Resolution Independence: SVG images can be resized without losing quality.
  • Interactivity: SVG elements can be animated, styled, and manipulated through JavaScript.
  • Accessibility: SVG code is readable and editable, making it easy to optimize.
  • Small File Size: SVG files are usually smaller than comparable image formats.

Benefits of SVG

Before diving into the technical details, let’s look at why you should use SVG over other image formats like PNG or JPEG.

  • Scalability: The most important feature of SVG is its ability to scale without quality degradation.
  • Style Control: You can control the appearance of an SVG using CSS, just like any HTML element.
  • Smaller File Size: SVG files tend to be smaller than their raster counterparts for simple images.
  • Interaction: SVGs can be made interactive with JavaScript, enabling effects such as hover animations or clicks.
  • SEO Friendly: SVG is text-based, which means it can be indexed by search engines, enhancing SEO.

Embedding SVG in HTML

There are several ways to embed SVG in your HTML document:

Using Inline SVG

You can directly write SVG code in your HTML file.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline SVG Example</title>
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg> <script data-no-optimize="1">window.lazyLoadOptions=Object.assign({},{threshold:300},window.lazyLoadOptions||{});!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function o(t){return e({},at,t)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,vt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,vt,e)}function i(t){return s(t,null),0}function r(t){return null===c(t)}function u(t){return c(t)===_t}function d(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function f(t,e){et?t.classList.add(e):t.className+=(t.className?" ":"")+e}function _(t,e){et?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function v(t,e){!e||(e=e._observer)&&e.unobserve(t)}function b(t,e){t&&(t.loadingCount+=e)}function p(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function h(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function m(t){return!!t[lt]}function E(t){return t[lt]}function I(t){return delete t[lt]}function y(e,t){var n;m(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[lt]=n)}function L(a,t){var o;m(a)&&(o=E(a),t.forEach(function(t){var e,n;e=a,(t=o[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function k(t,e,n){f(t,e.class_loading),s(t,st),n&&(b(n,1),d(e.callback_loading,t,n))}function A(t,e,n){n&&t.setAttribute(e,n)}function O(t,e){A(t,rt,l(t,e.data_sizes)),A(t,it,l(t,e.data_srcset)),A(t,ot,l(t,e.data_src))}function w(t,e,n){var a=l(t,e.data_bg_multi),o=l(t,e.data_bg_multi_hidpi);(a=nt&&o?o:a)&&(t.style.backgroundImage=a,n=n,f(t=t,(e=e).class_applied),s(t,dt),n&&(e.unobserve_completed&&v(t,e),d(e.callback_applied,t,n)))}function x(t,e){!e||0<e.loadingCount||0<e.toLoadCount||d(t.callback_finish,e)}function M(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function N(t){return!!t.llEvLisnrs}function z(t){if(N(t)){var e,n,a=t.llEvLisnrs;for(e in a){var o=a[e];n=e,o=o,t.removeEventListener(n,o)}delete t.llEvLisnrs}}function C(t,e,n){var a;delete t.llTempImage,b(n,-1),(a=n)&&--a.toLoadCount,_(t,e.class_loading),e.unobserve_completed&&v(t,n)}function R(i,r,c){var l=g(i)||i;N(l)||function(t,e,n){N(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";M(t,a,e),M(t,"error",n)}(l,function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_loaded),s(e,ut),d(n.callback_loaded,e,a),o||x(n,a),z(l)},function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_error),s(e,ft),d(n.callback_error,e,a),o||x(n,a),z(l)})}function T(t,e,n){var a,o,i,r,c;t.llTempImage=document.createElement("IMG"),R(t,e,n),m(c=t)||(c[lt]={backgroundImage:c.style.backgroundImage}),i=n,r=l(a=t,(o=e).data_bg),c=l(a,o.data_bg_hidpi),(r=nt&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),k(a,o,i)),w(t,e,n)}function G(t,e,n){var a;R(t,e,n),a=e,e=n,(t=Et[(n=t).tagName])&&(t(n,a),k(n,a,e))}function D(t,e,n){var a;a=t,(-1<It.indexOf(a.tagName)?G:T)(t,e,n)}function S(t,e,n){var a;t.setAttribute("loading","lazy"),R(t,e,n),a=e,(e=Et[(n=t).tagName])&&e(n,a),s(t,_t)}function V(t){t.removeAttribute(ot),t.removeAttribute(it),t.removeAttribute(rt)}function j(t){h(t,function(t){L(t,mt)}),L(t,mt)}function F(t){var e;(e=yt[t.tagName])?e(t):m(e=t)&&(t=E(e),e.style.backgroundImage=t.backgroundImage)}function P(t,e){var n;F(t),n=e,r(e=t)||u(e)||(_(e,n.class_entered),_(e,n.class_exited),_(e,n.class_applied),_(e,n.class_loading),_(e,n.class_loaded),_(e,n.class_error)),i(t),I(t)}function U(t,e,n,a){var o;n.cancel_on_exit&&(c(t)!==st||"IMG"===t.tagName&&(z(t),h(o=t,function(t){V(t)}),V(o),j(t),_(t,n.class_loading),b(a,-1),i(t),d(n.callback_cancel,t,e,a)))}function $(t,e,n,a){var o,i,r=(i=t,0<=bt.indexOf(c(i)));s(t,"entered"),f(t,n.class_entered),_(t,n.class_exited),o=t,i=a,n.unobserve_entered&&v(o,i),d(n.callback_enter,t,e,a),r||D(t,n,a)}function q(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function H(t,o,i){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?$(t.target,t,o,i):(e=t.target,n=t,a=o,t=i,void(r(e)||(f(e,a.class_exited),U(e,n,a,t),d(a.callback_exit,e,n,t))));var e,n,a})}function B(e,n){var t;tt&&!q(e)&&(n._observer=new IntersectionObserver(function(t){H(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function J(t){return Array.prototype.slice.call(t)}function K(t){return t.container.querySelectorAll(t.elements_selector)}function Q(t){return c(t)===ft}function W(t,e){return e=t||K(e),J(e).filter(r)}function X(e,t){var n;(n=K(e),J(n).filter(Q)).forEach(function(t){_(t,e.class_error),i(t)}),t.update()}function t(t,e){var n,a,t=o(t);this._settings=t,this.loadingCount=0,B(t,this),n=t,a=this,Y&&window.addEventListener("online",function(){X(n,a)}),this.update(e)}var Y="undefined"!=typeof window,Z=Y&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),tt=Y&&"IntersectionObserver"in window,et=Y&&"classList"in document.createElement("p"),nt=Y&&1<window.devicePixelRatio,at={elements_selector:".lazy",container:Z||Y?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",it="srcset",rt="sizes",ct="poster",lt="llOriginalAttrs",st="loading",ut="loaded",dt="applied",ft="error",_t="native",gt="data-",vt="ll-status",bt=[st,ut,dt,ft],pt=[ot],ht=[ot,ct],mt=[ot,it,rt],Et={IMG:function(t,e){h(t,function(t){y(t,mt),O(t,e)}),y(t,mt),O(t,e)},IFRAME:function(t,e){y(t,pt),A(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){y(t,pt),A(t,ot,l(t,e.data_src))}),y(t,ht),A(t,ct,l(t,e.data_poster)),A(t,ot,l(t,e.data_src)),t.load()}},It=["IMG","IFRAME","VIDEO"],yt={IMG:j,IFRAME:function(t){L(t,pt)},VIDEO:function(t){a(t,function(t){L(t,pt)}),L(t,ht),t.load()}},Lt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,o=this._settings,i=W(t,o);{if(p(this,i.length),!Z&&tt)return q(o)?(e=o,n=this,i.forEach(function(t){-1!==Lt.indexOf(t.tagName)&&S(t,e,n)}),void p(n,0)):(t=this._observer,o=i,t.disconnect(),a=t,void o.forEach(function(t){a.observe(t)}));this.loadAll(i)}},destroy:function(){this._observer&&this._observer.disconnect(),K(this._settings).forEach(function(t){I(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;W(t,n).forEach(function(t){v(t,e),D(t,n,e)})},restoreAll:function(){var e=this._settings;K(e).forEach(function(t){P(t,e)})}},t.load=function(t,e){e=o(e);D(t,e)},t.resetStatus=function(t){i(t)},t}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function a(){console.log("[LiteSpeed] Start Lazy Load"),o=new LazyLoad(Object.assign({},t.lazyLoadOptions||{},{elements_selector:"[data-lazyloaded]",callback_finish:n})),i=function(){o.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var o,i;t.addEventListener?t.addEventListener("load",a,!1):t.attachEvent("onload",a)}(window,document);</script><script data-no-optimize="1">window.litespeed_ui_events=window.litespeed_ui_events||["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://diginode.in/wp-content/litespeed/js/5ad5da7e80e1ecf64f3d75c5dab7ddb4.js?ver=8169a"></script></body>
</html>

Explanation

  • The svg tag defines the SVG container.
  • The circle element creates a circle with center (cx, cy), radius r, a black stroke, and a red fill.

Output: A red circle with a black border.

Embedding with an img tag

You can link to an SVG file using the standard <img> tag.

				
					<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="image.svg" alt="An SVG image" title="Scalable Vector Graphics (SVG) 1">

Embedding with the object tag

The <object> tag allows you to embed SVG files with additional fallback content.

				
					<object data="image.svg" type="image/svg+xml">
    Your browser does not support SVG.
</object>

Embedding with the embed tag

The <embed> tag is similar to <object>, and it directly embeds the SVG file.

				
					<embed src="image.svg" type="image/svg+xml">

Basic Shapes in SVG

SVG supports various basic shapes such as rectangles, circles, ellipses, lines, and polygons.

Drawing a Rectangle

				
					<svg width="200" height="200">
    <rect x="10" y="10" width="100" height="100" stroke="blue" fill="yellow" stroke-width="5" />
</svg>

Explanation

  • The rect element draws a rectangle starting at position (10, 10) with a width and height of 100.
  • The stroke is blue, the fill is yellow, and the border thickness is 5.

Output: A yellow square with a blue border.

Drawing an Ellipse

				
					<svg width="200" height="200">
    <ellipse cx="100" cy="100" rx="50" ry="80" stroke="green" fill="pink" />
</svg>

Explanation

  • The ellipse element creates an ellipse with center at (100, 100), and radii of 50 for the x-axis and 80 for the y-axis.

Output: A pink ellipse with a green border.

Drawing a Polygon

				
					<svg width="200" height="200">
    <polygon points="50,10 90,90 10,90" stroke="purple" fill="lime" />
</svg>

Explanation

  • The polygon element creates a shape by connecting points. In this case, the points form a triangle.

Output: A green triangle with a purple border.

Paths and Curves

The <path> element is one of the most versatile elements in SVG. It allows for the creation of complex shapes, lines, and curves.

				
					<svg width="200" height="200">
    <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

Explanation

  • M moves the starting point of the path.
  • C creates a cubic Bézier curve.
  • S creates a smooth cubic Bézier curve.
  • The path connects multiple points with curves.

Output: A curve that flows through the specified control points.

Working with Text in SVG

You can use the <text> element to display text inside an SVG graphic.

				
					<svg width="200" height="200">
    <text x="50" y="50" font-family="Verdana" font-size="20" fill="blue">Hello, SVG!</text>
</svg>

Explanation

  • The text element places the text at position (50, 50), with a font-family of Verdana and a font-size of 20 pixels.

Output: The text “Hello, SVG!” appears in blue.

Using Colors and Gradients

Linear Gradient

				
					<svg width="200" height="200">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect width="200" height="200" fill="url(#grad1)" />
</svg>

Explanation

  • The <defs> element defines reusable elements such as gradients.
  • The linearGradient element creates a gradient from yellow to red.

Output: A rectangle filled with a gradient that transitions from yellow to red.

SVG Transformations and Animations

SVG provides powerful transformations such as rotate, scale, and translate, along with animation support.

Transformations (Scaling)

				
					<svg width="200" height="200">
    <rect x="50" y="50" width="100" height="100" transform="scale(1.5)" fill="green" />
</svg>

Explanation: The transform attribute scales the rectangle by 1.5 times its original size.

Animations

				
					<svg width="200" height="200">
    <circle cx="100" cy="100" r="40" fill="blue">
        <animate attributeName="cx" from="100" to="150" dur="2s" repeatCount="indefinite" />
    </circle>
</svg>

Explanation

  • The animate element moves the circle horizontally from cx=100 to cx=150 over 2 seconds.

Manipulating SVG with CSS and JavaScript

SVG elements can be styled with CSS and manipulated with JavaScript just like any other HTML elements.

CSS Styling

				
					<svg width="200" height="200">
    <circle cx="100" cy="100" r="50" class="circle" />
</svg><style>.circle {
        fill: orange;
        stroke: black;
        stroke-width: 5;
    }</style>

JavaScript Manipulation

				
					<svg id="svg1" width="200" height="200">
    <rect id="myRect" width="100" height="100" fill="red"></rect>
</svg> <script type="litespeed/javascript">document.getElementById('myRect').addEventListener('click',function(){this.setAttribute('fill','blue')})</script>

Explanation

  • Clicking on the rectangle changes its fill color from red to blue.

Optimizing SVG for Web Performance

While SVG files are usually small, optimizing them further can improve web performance. Here are some optimization tips:

  • Remove unnecessary attributes: Clean up any extraneous data in the SVG file.
  • Minify the SVG: Use tools like SVGO to reduce file size.
  • Use inline SVG sparingly: For large SVGs, consider external files instead of inline SVG to improve readability.

SVG is a versatile and powerful tool in modern web development. It offers scalability, interactivity, and the ability to create complex graphics while maintaining small file sizes. By understanding how to use SVG, you can create responsive, high-quality graphics that are easily manipulated with CSS and JavaScript, making it an essential skill for any web developer. With the examples provided, you should be well-equipped to begin incorporating SVG into your web projects confidently. Happy coding !❤️

Table of Contents

Home
Roadmap
ATS Resume
Playground
Resources