{"id":81766,"date":"2024-10-27T23:15:37","date_gmt":"2024-10-27T17:45:37","guid":{"rendered":"https:\/\/www.admecindia.co.in\/?p=81766"},"modified":"2025-04-08T13:23:41","modified_gmt":"2025-04-08T07:53:41","slug":"what-is-svg-and-how-to-use-it-in-website","status":"publish","type":"post","link":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/","title":{"rendered":"What is SVG and How to Use it in Your Website?"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p>In this article we are going to be looking at what is svg and how to use it in your website or your project. We will also talk about how you can control it with <a href=\"https:\/\/www.admecindia.co.in\/course\/best-html-css-master-course\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS<\/a> and animating them to your will. So, let&#8217;s know how to use SVG in website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?resize=1024%2C569&#038;ssl=1\" alt=\"What is SVG and How to Use it in Your Website?\" class=\"wp-image-82383\" srcset=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?resize=1024%2C569&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?resize=300%2C167&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?resize=768%2C427&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?resize=1536%2C854&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?resize=900%2C500&amp;ssl=1 900w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?w=2000&amp;ssl=1 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">What is SVG and How to Use it in Your Website?<\/figcaption><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is SVG?<\/h2>\n\n\n\n<p>SVG or also scalable vector graphics can be used to add vector graphics on the webpage. This graphic will not look like your regular image rather it will be like a code in the backend written in XML format. In the front it will look like a normal illustration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why use SVG?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Small file size: Due to them being a vector graphic they can be optimized to smaller sizes.<\/li>\n\n\n\n<li>Scalable: SVGs are scalable meaning it will not pixelate even if it gets stretched or reduced to a very small size. This makes SVGs responsive. In short it doesn&#8217;t lose its quality at any point.<\/li>\n\n\n\n<li>Can be styled: Since SVG appears in XML code format. We can easily give it a class or an id and style them with CSS.<\/li>\n\n\n\n<li>Can be animated: Not only we can style the SVGs with CSS but we can also make them animated by using pseudo classes or with animation properties.<\/li>\n\n\n\n<li>Can be used with Js: SVGs can be controlled by <a href=\"https:\/\/www.admecindia.co.in\/course\/best-javascript-master-course\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript<\/a> and can be manipulated upon the interaction of the user to it.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"   &lt;div class=&quot;cta-panel-single-course&quot;&gt;\n      &lt;div class=&quot;mid-btn-wrapper&quot;&gt;\n        &lt;div&gt;\n          &lt;h2&gt;\n            Want to learn HTML, CSS, JavaScript or complete web designing? Get\n            Complete Details Now!\n          &lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;new-button-design&quot;&gt;\n          &lt;span class=&quot;gdlr-core-content pum-trigger popmake- 9967&quot;&gt;\n            Enquire Now&lt;\/span\n          &gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">   <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;cta-panel-single-course&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;mid-btn-wrapper&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            Want to learn HTML, CSS, JavaScript or complete web designing? Get<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            Complete Details Now!<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;new-button-design&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">span<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;gdlr-core-content pum-trigger popmake- 9967&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            Enquire Now&lt;\/span<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to make SVGs?<\/h2>\n\n\n\n<p>There are two methods in which you can create a SVG:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">By Coding<\/h3>\n\n\n\n<p>Since SVG is written in XML format one directly create shapes and element. It is possible to create&nbsp;by simply coding. Here&#8217;s an example on how to create a rectangle:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<svg width=&quot;400&quot; height=&quot;110&quot;&gt;\n\u00a0 <rect width=&quot;300&quot; height=&quot;100&quot; fill=&quot;rgb(0,0,255)&quot; \/&gt;\n<\/svg&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">svg<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;400&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;110&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">rect<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;300&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;100&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">fill<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;rgb(0,0,255)&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">svg<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>*fill is used in svgs to give a background color. Any SVG shape when making should be wrapped in an SVG element.<\/p>\n\n\n\n<p>Here are other elements that can utilized :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rectangle &lt;rect&gt;<\/li>\n\n\n\n<li>Circle &lt;circle&gt;<\/li>\n\n\n\n<li>Ellipse &lt;ellipse&gt;<\/li>\n\n\n\n<li>Line &lt;line&gt;<\/li>\n\n\n\n<li>Polyline &lt;polyline&gt;<\/li>\n\n\n\n<li>Polygon &lt;polygon&gt;<\/li>\n\n\n\n<li>Path &lt;path&gt;<\/li>\n<\/ul>\n\n\n\n<p>Except for the path other elements work in a similar fashion<\/p>\n\n\n\n<p>For the path element there are several other commands that comes into play like<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>M = moveto<\/li>\n\n\n\n<li>L = lineto<\/li>\n\n\n\n<li>H = horizontal lineto<\/li>\n\n\n\n<li>V = vertical lineto<\/li>\n\n\n\n<li>C = curveto<\/li>\n\n\n\n<li>S = smooth curveto<\/li>\n\n\n\n<li>Q = quadratic B\u00e9zier curve<\/li>\n\n\n\n<li>T = smooth quadraticcurveto<\/li>\n\n\n\n<li>A = elliptical Arc<\/li>\n\n\n\n<li>Z = closepath<\/li>\n<\/ul>\n\n\n\n<p>These all are used in combination to make an SVG. Let me explain on uppercase and lowercase different meanings too. Uppercase is used for making an element absolutely positioned while lowercase is used for relative positioning.<\/p>\n\n\n\n<p>Read more about this from <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\" target=\"_blank\" rel=\"noreferrer noopener\">Mozilla Docs<\/a> or <a href=\"https:\/\/www.w3schools.com\/graphics\/svg_intro.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">W3School<\/a>.<\/p>\n\n\n\n<p>Suffice to say it&#8217;s a bit too complex. No worries though we have another option<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using a Software<\/h3>\n\n\n\n<p>This is the most easiest and fastest way to make an SVG element is to use different software available. So how do they work and what are they. <\/p>\n\n\n\n<p>So the software that can be used for this are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adobe Illustrator<\/li>\n\n\n\n<li>Figma<\/li>\n<\/ul>\n\n\n\n<p>If you want to design a complex illustration having multiple elements to it then it will be easier to just learn UI UX desining. Under <a href=\"https:\/\/www.admecindia.co.in\/courses\/ui-ux-design-courses\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>UI UX design training<\/strong><\/a>, you can master both <strong><a href=\"https:\/\/www.admecindia.co.in\/course\/figma-course-in-delhi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a><\/strong> and <strong><a href=\"https:\/\/www.admecindia.co.in\/course\/best-adobe-illustrator-master-course\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a><\/strong>. Especailly Illustrator is best to master since it&#8217;s made to work on vector objects.<\/p>\n\n\n\n<p>Firstly you need to design the illustration and then you can simply export it in svg format. To do that go to<\/p>\n\n\n\n<p><strong>File &#8211; Export- Export As<\/strong><\/p>\n\n\n\n<p>Then select file type to be SVG and you are done.<\/p>\n\n\n\n<p>However if you want to make an icon or minimalistic illustration then you can also opt for figma.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using CSS to manipulate the SVG<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a SVG<\/h3>\n\n\n\n<p>In order to do this we actually need to make an icon using the softwares mentioned. I&#8217;ll be using figma for this one.<\/p>\n\n\n\n<p>So let&#8217;s begin, here are the steps to make an slider icon<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open Figma<\/li>\n\n\n\n<li>Create new file<\/li>\n\n\n\n<li>Make a frame not so 100X100 would do (create yourself however they are prebuilt sizes on the right)<\/li>\n\n\n\n<li>Create a slider icon using shapes like circle and rectangle<\/li>\n\n\n\n<li>Now group the elements together like a circle a rectangle have same group and likewise<\/li>\n\n\n\n<li>Rename elements accordingly (we are doing it because this will get converted in a id)<\/li>\n\n\n\n<li>Now it&#8217;s time to export it in SVG format select the frame<\/li>\n\n\n\n<li>Below the fill colors select show in exports<\/li>\n\n\n\n<li>Select SVG format and remember to choose the id attribute setting that next to file type.<\/li>\n\n\n\n<li>And Export it to the desired location.<\/li>\n<\/ul>\n\n\n\n<p>We have our SVG now lets create simple animation using this<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hover Effect On SVG<\/h2>\n\n\n\n<p>In order to do this you should have good knowledge of HTML and CSS<\/p>\n\n\n\n<p>Here are steps to make the structure<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a html file add basic code like html, head, and body.<\/li>\n\n\n\n<li>Now open the SVG file either with notepad or your preferred code editor<\/li>\n\n\n\n<li>Copy the code you see in the html document<\/li>\n\n\n\n<li>Add additional heading, paragraph, and a button if you like.<\/li>\n\n\n\n<li>Wrap everything into a parent div and add a class called parent-svg (you can choose any name)<\/li>\n\n\n\n<li>Note: there are fill attributes in SVG. Note down the color and remove that from everywhere as it becomes harder to control with CSS. After doing that SVG will become invisible since it has no background color now (we&#8217;ll get this back in CSS below).<\/li>\n\n\n\n<li>Also go ahead and add CSS variables on each of the circles. This will be utilized if we wanted to give them a delay.<\/li>\n<\/ul>\n\n\n\n<p>After doing the code should look like the one below<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<!DOCTYPE html&gt;\n<html lang=&quot;en&quot;&gt;\n\n<head&gt;\n\u00a0\u00a0\u00a0 <meta charset=&quot;UTF-8&quot;&gt;\n\u00a0\u00a0\u00a0 <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n\u00a0\u00a0\u00a0 <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n\u00a0\u00a0\u00a0 <title&gt;Slides<\/title&gt;\n<\/head&gt;\n\n<body&gt;\n\n\u00a0\u00a0\u00a0 <div class=&quot;parent-svg&quot;&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <svg width=&quot;100&quot; height=&quot;89&quot; viewBox=&quot;0 0 120 89&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <g id=&quot;Frame1&quot;&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <rect width=&quot;120&quot; height=&quot;89&quot; fill=&quot;white&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <g id=&quot;first&quot;&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <rect id=&quot;rectangle_1&quot; x=&quot;12&quot; y=&quot;17&quot; width=&quot;96&quot; height=&quot;8&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <circle id=&quot;circle_1&quot; cx=&quot;94.5&quot; style=&quot;--order:1;&quot; cy=&quot;21.5&quot; r=&quot;8.5&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/g&gt;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <g id=&quot;second&quot;&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <rect id=&quot;rectangle_2&quot; x=&quot;12&quot; y=&quot;40&quot; width=&quot;96&quot; height=&quot;8&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <circle id=&quot;circle_2&quot; cx=&quot;59.5&quot; style=&quot;--order:2;&quot; cy=&quot;44.5&quot; r=&quot;8.5&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/g&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <g id=&quot;third&quot;&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <rect id=&quot;rectangle_3&quot; x=&quot;12&quot; y=&quot;63&quot; width=&quot;96&quot; height=&quot;8&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <circle id=&quot;circle_3&quot; style=&quot;--order:3;&quot; cx=&quot;27.5&quot; cy=&quot;67.5&quot; r=&quot;8.5&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/g&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/g&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/svg&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h2&gt;This is a heading<\/h2&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, quidem quis. Asperiores at suscipit nam\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 beatae ducimus eaque eius quo ex quam nobis voluptatum quaerat dolores, minima odio nihil deleniti.\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <button&gt;Read More<\/button&gt;\n\u00a0\u00a0\u00a0 <\/div&gt;\n<\/body&gt;\n\n<\/html&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">&lt;!<\/span><span style=\"color: #4FC1FF\">DOCTYPE<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">html<\/span><span style=\"color: #D4D4D4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">lang<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;en&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">charset<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;UTF-8&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">http-equiv<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;X-UA-Compatible&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;IE=edge&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">name<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;viewport&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">Slides<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;parent-svg&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">svg<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;100&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;89&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">viewBox<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;0 0 120 89&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">fill<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;none&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">xmlns<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;http:\/\/www.w3.org\/2000\/svg&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">g<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;Frame1&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">rect<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;120&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;89&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">fill<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;white&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">g<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;first&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">rect<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;rectangle_1&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">x<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;12&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">y<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;17&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;96&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;8&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">circle<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;circle_1&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">cx<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;94.5&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">style<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;--order:1;&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">cy<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;21.5&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">r<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;8.5&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">g<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">g<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;second&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">rect<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;rectangle_2&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">x<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;12&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">y<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;40&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;96&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;8&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">circle<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;circle_2&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">cx<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;59.5&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">style<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;--order:2;&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">cy<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;44.5&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">r<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;8.5&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">g<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">g<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;third&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">rect<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;rectangle_3&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">x<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;12&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">y<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;63&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;96&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;8&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">circle<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;circle_3&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">style<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;--order:3;&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">cx<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;27.5&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">cy<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;67.5&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">r<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;8.5&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">g<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">g<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">svg<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">This is a heading<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, quidem quis. Asperiores at suscipit nam<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 beatae ducimus eaque eius quo ex quam nobis voluptatum quaerat dolores, minima odio nihil deleniti.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">p<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">button<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">Read More<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">button<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now we have structure let&#8217;s get into styling it<\/p>\n\n\n\n<p>Note in root two variables are created and have the same colors as fill values in SVG had.<\/p>\n\n\n\n<p>Here is the CSS to style the elements<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"* {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 box-sizing: border-box;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-family: 'Poppins', sans-serif;\n\u00a0\u00a0\u00a0 }\n:root{ \u00a0 --light-color:#F55151; \u00a0 --dark-color:#292929; }\n\u00a0\u00a0\u00a0 .parent-svg {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 400px;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 border: 1px solid #ddd;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 20px;\n\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0 .parent-svg h2 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 margin: 0px;\n\u00a0\u00a0\u00a0 }\n\u00a0\u00a0\u00a0 .parent-svg p {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 margin-top: 0%;\n\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0 .parent-svg button {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 10px 20px;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 border: none;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: var(--light-color);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: #fff;\n\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0 .parent-svg:hover button {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: var(--dark-color);\n\u00a0\u00a0\u00a0 }\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">* {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 box-<\/span><span style=\"color: #9CDCFE\">sizing:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">border<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">box<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #9CDCFE\">font<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">family<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">&#39;Poppins&#39;<\/span><span style=\"color: #D4D4D4\">, sans-serif;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #9CDCFE\">root<\/span><span style=\"color: #D4D4D4\">{ \u00a0 --<\/span><span style=\"color: #9CDCFE\">light<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">:#<\/span><span style=\"color: #4FC1FF\">F55151<\/span><span style=\"color: #D4D4D4\">; \u00a0 --<\/span><span style=\"color: #9CDCFE\">dark<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">:#<\/span><span style=\"color: #B5CEA8\">292929<\/span><span style=\"color: #D4D4D4\">; }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 .<\/span><span style=\"color: #9CDCFE\">parent<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">svg<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">width<\/span><span style=\"color: #D4D4D4\">: 400<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">border<\/span><span style=\"color: #D4D4D4\">: 1<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">solid<\/span><span style=\"color: #D4D4D4\"> #<\/span><span style=\"color: #9CDCFE\">ddd<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">padding<\/span><span style=\"color: #D4D4D4\">: 20<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 .<\/span><span style=\"color: #9CDCFE\">parent<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">svg<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">h2<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">margin<\/span><span style=\"color: #D4D4D4\">: 0<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 .<\/span><span style=\"color: #9CDCFE\">parent<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">svg<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">p<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #9CDCFE\">margin<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">top<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">%;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 .<\/span><span style=\"color: #9CDCFE\">parent<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">svg<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">padding<\/span><span style=\"color: #D4D4D4\">: 10<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\"> 20<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">border<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">none<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\">(--<\/span><span style=\"color: #9CDCFE\">light<\/span><span style=\"color: #D4D4D4\">-color);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: #<\/span><span style=\"color: #9CDCFE\">fff<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 .<\/span><span style=\"color: #9CDCFE\">parent<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">svg<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #9CDCFE\">hover<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\">(--<\/span><span style=\"color: #9CDCFE\">dark<\/span><span style=\"color: #D4D4D4\">-color);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0 }<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now we have made a layout, it&#8217;s time to make the hover effect for svg. Doing this is quite easy. All you have to do is target ids you see in SVG (the ones you gave when renamed the elements in figma).<\/p>\n\n\n\n<p>Using translate property we move slider keys in the SVG and we also need to transition property to the elements. In this case we are using linear to make runs at an equal pace.<\/p>\n\n\n\n<p>So lets make our SVG visible again by giving them the fill color using CSS variables.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"#rectangle_3,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #rectangle_2,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #rectangle_1 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fill: var(--dark-color);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #circle_1,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #circle_2,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #circle_3 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fill: var(--light-color);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transition: all 1s linear;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">#<\/span><span style=\"color: #9CDCFE\">rectangle_3<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #<\/span><span style=\"color: #9CDCFE\">rectangle_2<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #<\/span><span style=\"color: #9CDCFE\">rectangle_1<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">fill<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\">(--<\/span><span style=\"color: #9CDCFE\">dark<\/span><span style=\"color: #D4D4D4\">-color);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #<\/span><span style=\"color: #9CDCFE\">circle_1<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #<\/span><span style=\"color: #9CDCFE\">circle_2<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #<\/span><span style=\"color: #9CDCFE\">circle_3<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">fill<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\">(--<\/span><span style=\"color: #9CDCFE\">light<\/span><span style=\"color: #D4D4D4\">-color);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">transition<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">all<\/span><span style=\"color: #D4D4D4\"> 1<\/span><span style=\"color: #9CDCFE\">s<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">linear<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now determine the position where you want your SVG circles to be when hovered upon. Give them appropriately with transform translate property.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".parent-svg:hover #circle_1 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translateX(-65px);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .parent-svg:hover #circle_3 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translateX(65px);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .parent-svg:hover #circle_2 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translateX(20px);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">parent<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">svg<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #9CDCFE\">hover<\/span><span style=\"color: #D4D4D4\"> #<\/span><span style=\"color: #9CDCFE\">circle_1<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">transform<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #DCDCAA\">translateX<\/span><span style=\"color: #D4D4D4\">(-65<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .<\/span><span style=\"color: #9CDCFE\">parent<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">svg<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #9CDCFE\">hover<\/span><span style=\"color: #D4D4D4\"> #<\/span><span style=\"color: #9CDCFE\">circle_3<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">transform<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #DCDCAA\">translateX<\/span><span style=\"color: #D4D4D4\">(65<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .<\/span><span style=\"color: #9CDCFE\">parent<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">svg<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #9CDCFE\">hover<\/span><span style=\"color: #D4D4D4\"> #<\/span><span style=\"color: #9CDCFE\">circle_2<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"color: #C8C8C8\">transform<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #DCDCAA\">translateX<\/span><span style=\"color: #D4D4D4\">(20<\/span><span style=\"color: #9CDCFE\">px<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>After doing that we also want our circle elements to go back to their original position. So add transform translate value to zero in base CSS of circle ids.<\/p>\n\n\n\n<p>Now to add transition delay we have already added the variables now only thing we need to is target those variables and use calc function to give each of them delay individually like so<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"transition-delay: calc(var(--order)*300ms);\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">transition<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">delay<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #DCDCAA\">calc<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #DCDCAA\">var<\/span><span style=\"color: #D4D4D4\">(--<\/span><span style=\"color: #9CDCFE\">order<\/span><span style=\"color: #D4D4D4\">)*300<\/span><span style=\"color: #9CDCFE\">ms<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>In the same way, different elements can be made and animated by CSS only.<\/p>\n\n\n\n<p>By using SVG more often you can make your site more attractive. This can also be integrated with animation properties of CSS as well but I guess that&#8217;s for some other article.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\n    &lt;div class=&quot;cta-panel-single-course&quot;&gt;\n      &lt;div class=&quot;mid-btn-wrapper&quot;&gt;\n        &lt;div&gt;\n          &lt;h2&gt;\n            Get complete course syllabus on website design and development\n            courses at ADMEC Multimedia.!\n          &lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;new-button-design&quot;&gt;\n          &lt;span class=&quot;gdlr-core-content pum-trigger popmake-16803&quot;\n            &gt;Get Syllabus&lt;\/span\n          &gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;cta-panel-single-course&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;mid-btn-wrapper&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            Get complete course syllabus on website design and development<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            courses at ADMEC Multimedia.!<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">h2<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;new-button-design&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">span<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;gdlr-core-content pum-trigger popmake-16803&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">Get Syllabus&lt;\/span<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">          <\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">About Author<\/h2>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:20% auto\"><figure class=\"wp-block-media-text__media\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2023\/12\/abhishek-sinha.jpg?resize=300%2C300&#038;ssl=1\" alt=\"abhishek sinha - admec web course student\" class=\"wp-image-70848 size-full\" srcset=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2023\/12\/abhishek-sinha.jpg?w=300&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2023\/12\/abhishek-sinha.jpg?resize=150%2C150&amp;ssl=1 150w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Hi, this is Abhishek Sinha. I&#8217;m currently working as a full-stack web developer. I&#8217;ve completed my <strong><a href=\"https:\/\/www.admecindia.co.in\/course\/most-advanced-web-design-development-master-plus-course\/\" target=\"_blank\" rel=\"noreferrer noopener\">full stack development course in Delhi<\/a><\/strong> from ADMEC Multimedia Institute. I got a chance to share my approach on how to use SVG in website through this blog. I hope you found it useful.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Start Learning Website Designing and Development from ADMEC Multimedia<\/h2>\n\n\n\n<p>Ours <a href=\"https:\/\/www.admecindia.co.in\/courses\/web-designing-courses\/\" target=\"_blank\" rel=\"noreferrer noopener\">diploma and certificate courses in web designing<\/a> and <a href=\"https:\/\/www.admecindia.co.in\/courses\/web-development-courses\/\" target=\"_blank\" rel=\"noreferrer noopener\">web development<\/a> provide 100% placement assistance. <a href=\"http:\/\/admecindia.co.in\/\">ADMEC Multimedia Institute<\/a> is a professional web designing and development training institute, located in New Delhi. Since 2006, we&#8217;ve <a href=\"https:\/\/www.admecindia.co.in\/admec-placed-students\/\" target=\"_blank\" rel=\"noreferrer noopener\">placed thousands of students<\/a> in digital media, video production and IT sectors. For more information on our batches, trainers, and fee structure, you can contact at <a href=\"tel:9911782350\">+91 9911782350<\/a> or mail us info@admecindia.co.in. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article we are going to be looking at what is svg and how to use it in your website or your project. We will also talk about how [&hellip;]<\/p>\n","protected":false},"author":44,"featured_media":82383,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[80],"tags":[97],"class_list":["post-81766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-html5-css3"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is SVG and How to Use it in Website?- ADMEC Multimedia Institute<\/title>\n<meta name=\"description\" content=\"Understand the true meaning of SVG and know how to use SVG in website with this short guide for web designer and developers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is SVG and How to Use it in Website?- ADMEC Multimedia Institute\" \/>\n<meta property=\"og:description\" content=\"Understand the true meaning of SVG and know how to use SVG in website with this short guide for web designer and developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/\" \/>\n<meta property=\"og:site_name\" content=\"ADMEC Multimedia Institute\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/admecInstituteOfficial\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-27T17:45:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-08T07:53:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1112\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Anuradha Sengar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@admecinstitute\" \/>\n<meta name=\"twitter:site\" content=\"@admecinstitute\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anuradha Sengar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/\"},\"author\":{\"name\":\"Anuradha Sengar\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/person\/6527efa4803143e257d6aa881b5feef7\"},\"headline\":\"What is SVG and How to Use it in Your Website?\",\"datePublished\":\"2024-10-27T17:45:37+00:00\",\"dateModified\":\"2025-04-08T07:53:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/\"},\"wordCount\":1350,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?fit=2000%2C1112&ssl=1\",\"keywords\":[\"HTML5 &amp; CSS3\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/\",\"url\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/\",\"name\":\"What is SVG and How to Use it in Website?- ADMEC Multimedia Institute\",\"isPartOf\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?fit=2000%2C1112&ssl=1\",\"datePublished\":\"2024-10-27T17:45:37+00:00\",\"dateModified\":\"2025-04-08T07:53:41+00:00\",\"description\":\"Understand the true meaning of SVG and know how to use SVG in website with this short guide for web designer and developers.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?fit=2000%2C1112&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?fit=2000%2C1112&ssl=1\",\"width\":2000,\"height\":1112,\"caption\":\"What is SVG and How to Use it in Your Website?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.admecindia.co.in\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is SVG and How to Use it in Your Website?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.admecindia.co.in\/#website\",\"url\":\"https:\/\/www.admecindia.co.in\/\",\"name\":\"ADMEC Multimedia Institute\",\"description\":\"Best Graphic Design, Web Design, UX Design, Animation Institute in Delhi\",\"publisher\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.admecindia.co.in\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.admecindia.co.in\/#organization\",\"name\":\"ADMEC\",\"url\":\"https:\/\/www.admecindia.co.in\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1\",\"width\":225,\"height\":225,\"caption\":\"ADMEC\"},\"image\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/admecInstituteOfficial\/\",\"https:\/\/x.com\/admecinstitute\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/person\/6527efa4803143e257d6aa881b5feef7\",\"name\":\"Anuradha Sengar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/be1c5bd7491d4f5bf3666543370ab2d6d16f5b1c483b3e2a0284f787e930719e?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/be1c5bd7491d4f5bf3666543370ab2d6d16f5b1c483b3e2a0284f787e930719e?s=96&r=g\",\"caption\":\"Anuradha Sengar\"},\"sameAs\":[\"https:\/\/www.cadtraininginstitute.com\"],\"url\":\"https:\/\/www.admecindia.co.in\/author\/anuradha_sengar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is SVG and How to Use it in Website?- ADMEC Multimedia Institute","description":"Understand the true meaning of SVG and know how to use SVG in website with this short guide for web designer and developers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/","og_locale":"en_US","og_type":"article","og_title":"What is SVG and How to Use it in Website?- ADMEC Multimedia Institute","og_description":"Understand the true meaning of SVG and know how to use SVG in website with this short guide for web designer and developers.","og_url":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/","og_site_name":"ADMEC Multimedia Institute","article_publisher":"https:\/\/www.facebook.com\/admecInstituteOfficial\/","article_published_time":"2024-10-27T17:45:37+00:00","article_modified_time":"2025-04-08T07:53:41+00:00","og_image":[{"width":2000,"height":1112,"url":"https:\/\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg","type":"image\/jpeg"}],"author":"Anuradha Sengar","twitter_card":"summary_large_image","twitter_creator":"@admecinstitute","twitter_site":"@admecinstitute","twitter_misc":{"Written by":"Anuradha Sengar","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#article","isPartOf":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/"},"author":{"name":"Anuradha Sengar","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/person\/6527efa4803143e257d6aa881b5feef7"},"headline":"What is SVG and How to Use it in Your Website?","datePublished":"2024-10-27T17:45:37+00:00","dateModified":"2025-04-08T07:53:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/"},"wordCount":1350,"commentCount":0,"publisher":{"@id":"https:\/\/www.admecindia.co.in\/#organization"},"image":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?fit=2000%2C1112&ssl=1","keywords":["HTML5 &amp; CSS3"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/","url":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/","name":"What is SVG and How to Use it in Website?- ADMEC Multimedia Institute","isPartOf":{"@id":"https:\/\/www.admecindia.co.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#primaryimage"},"image":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?fit=2000%2C1112&ssl=1","datePublished":"2024-10-27T17:45:37+00:00","dateModified":"2025-04-08T07:53:41+00:00","description":"Understand the true meaning of SVG and know how to use SVG in website with this short guide for web designer and developers.","breadcrumb":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#primaryimage","url":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?fit=2000%2C1112&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?fit=2000%2C1112&ssl=1","width":2000,"height":1112,"caption":"What is SVG and How to Use it in Your Website?"},{"@type":"BreadcrumbList","@id":"https:\/\/www.admecindia.co.in\/web-design\/what-is-svg-and-how-to-use-it-in-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.admecindia.co.in\/"},{"@type":"ListItem","position":2,"name":"What is SVG and How to Use it in Your Website?"}]},{"@type":"WebSite","@id":"https:\/\/www.admecindia.co.in\/#website","url":"https:\/\/www.admecindia.co.in\/","name":"ADMEC Multimedia Institute","description":"Best Graphic Design, Web Design, UX Design, Animation Institute in Delhi","publisher":{"@id":"https:\/\/www.admecindia.co.in\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.admecindia.co.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.admecindia.co.in\/#organization","name":"ADMEC","url":"https:\/\/www.admecindia.co.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1","width":225,"height":225,"caption":"ADMEC"},"image":{"@id":"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/admecInstituteOfficial\/","https:\/\/x.com\/admecinstitute"]},{"@type":"Person","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/person\/6527efa4803143e257d6aa881b5feef7","name":"Anuradha Sengar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/be1c5bd7491d4f5bf3666543370ab2d6d16f5b1c483b3e2a0284f787e930719e?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/be1c5bd7491d4f5bf3666543370ab2d6d16f5b1c483b3e2a0284f787e930719e?s=96&r=g","caption":"Anuradha Sengar"},"sameAs":["https:\/\/www.cadtraininginstitute.com"],"url":"https:\/\/www.admecindia.co.in\/author\/anuradha_sengar\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/What-is-SVG-and-How-to-Use-it-in-Your-Website.jpg?fit=2000%2C1112&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":147,"url":"https:\/\/www.admecindia.co.in\/web-design\/what-do-you-need-know-your-advanced-bootstrap-training\/","url_meta":{"origin":81766,"position":0},"title":"What do You Need to Know before Your Advanced Bootstrap Training","author":"ADMEC Multimedia Institute","date":"December 23, 2014","format":false,"excerpt":"I know you have heard about Bootstrap earlier and may be you have used it for one or many websites. Yet let me give some introduction you about\u00a0Bootstrap. It is a framework from Twitter to create responsive website and HTML5 based applications with the great deal of ease. If you\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/12\/admec-internal-what-do-you-need-to-know-before-your-advanced-bootstrap-training.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/12\/admec-internal-what-do-you-need-to-know-before-your-advanced-bootstrap-training.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/12\/admec-internal-what-do-you-need-to-know-before-your-advanced-bootstrap-training.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/12\/admec-internal-what-do-you-need-to-know-before-your-advanced-bootstrap-training.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/12\/admec-internal-what-do-you-need-to-know-before-your-advanced-bootstrap-training.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":698,"url":"https:\/\/www.admecindia.co.in\/web-design\/most-useful-html5-and-css3-frameworks-ui-development-mobile-friendly-websites-and-applications\/","url_meta":{"origin":81766,"position":1},"title":"Most Useful HTML5 and CSS3 Frameworks for UI Development of Mobile Friendly Websites and Applications","author":"ADMEC Multimedia Institute","date":"December 23, 2016","format":false,"excerpt":"Do you want to know about the most useful HTML5 and CSS3 frameworks for making the UI development of your website easy? If yes then this blog is gonna help you in that. Most Useful HTML5 and CSS3 Frameworks for UI Development of Mobile Friendly Websites and Applications When a\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/12\/admec-internal-Most-Useful-HTML5-and-CSS3-Frameworks-for-UI-Development-of-Mobile-Friendly-Websites-and-Applications.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/12\/admec-internal-Most-Useful-HTML5-and-CSS3-Frameworks-for-UI-Development-of-Mobile-Friendly-Websites-and-Applications.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/12\/admec-internal-Most-Useful-HTML5-and-CSS3-Frameworks-for-UI-Development-of-Mobile-Friendly-Websites-and-Applications.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/12\/admec-internal-Most-Useful-HTML5-and-CSS3-Frameworks-for-UI-Development-of-Mobile-Friendly-Websites-and-Applications.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/12\/admec-internal-Most-Useful-HTML5-and-CSS3-Frameworks-for-UI-Development-of-Mobile-Friendly-Websites-and-Applications.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":674,"url":"https:\/\/www.admecindia.co.in\/web-design\/10-most-common-interview-questions-and-answers-html5-and-css3\/","url_meta":{"origin":81766,"position":2},"title":"Common HTML5 and CSS3 Interview Questions","author":"ADMEC Multimedia Institute","date":"December 23, 2019","format":false,"excerpt":"Have to apply as a front-end-developer? or HTML5 & CSS3 expert? But do not know that from where you can prepare for the interview. So that you can crack it in first go. This blog will guide you through the overview of HTML as well as CSS and along with\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/12\/admec-10-most-common-interview-questions-answers-html-css.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/12\/admec-10-most-common-interview-questions-answers-html-css.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/12\/admec-10-most-common-interview-questions-answers-html-css.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/12\/admec-10-most-common-interview-questions-answers-html-css.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/12\/admec-10-most-common-interview-questions-answers-html-css.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":431,"url":"https:\/\/www.admecindia.co.in\/web-design\/10-new-features-html5-examples\/","url_meta":{"origin":81766,"position":3},"title":"Top New Features of HTML5 with Examples","author":"ADMEC Multimedia Institute","date":"May 13, 2018","format":false,"excerpt":"Technology is growing exponentially. This enterprise moves fast\u2014definitely fast! if you're no longer cautious, you will be left in its dirt. So, in case you're feeling a chunk overwhelmed with the coming adjustments\/ updates in HTML5, use this HTML new features blog as a primer of the stuff you ought\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"Top New Features of HTML5 with Examples","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/05\/html-features.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/05\/html-features.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/05\/html-features.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/05\/html-features.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/05\/html-features.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":482,"url":"https:\/\/www.admecindia.co.in\/web-design\/semantic-structure-html5-practical-and-easy-explanation\/","url_meta":{"origin":81766,"position":4},"title":"Semantic Structure in HTML5 &#8211; A Practical and Easy Explanation","author":"ADMEC Multimedia Institute","date":"October 8, 2018","format":false,"excerpt":"If you understand a little regarding HTML you will certainly comprehend that HTML tags are (primarily) made use of for styling web content - these tags inform the web browser the best ways to present the web content on the web page. They do not suggest regarding just what kind\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/10\/html-semantic-structure.jpg?fit=1200%2C668&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/10\/html-semantic-structure.jpg?fit=1200%2C668&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/10\/html-semantic-structure.jpg?fit=1200%2C668&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/10\/html-semantic-structure.jpg?fit=1200%2C668&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2018\/10\/html-semantic-structure.jpg?fit=1200%2C668&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":39,"url":"https:\/\/www.admecindia.co.in\/web-design\/learn-about-css3-and-its-advantages\/","url_meta":{"origin":81766,"position":5},"title":"Learn About CSS3 and its Advantages","author":"ADMEC Multimedia Institute","date":"February 1, 2014","format":false,"excerpt":"Dear reader,\u00a0CSS3\u00a0is becoming very popular now days because of its flexible as well as advanced coding features. Our expert writers have put constrain on CSS new features, usability, cross browser issues, and some of the common fundamental issues here in this article. In this article you will be acquainted with\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/02\/css3-advantages.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/02\/css3-advantages.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/02\/css3-advantages.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/02\/css3-advantages.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/02\/css3-advantages.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/posts\/81766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/comments?post=81766"}],"version-history":[{"count":0,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/posts\/81766\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/media\/82383"}],"wp:attachment":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/media?parent=81766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/categories?post=81766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/tags?post=81766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}