{"id":3698,"date":"2025-11-14T03:18:07","date_gmt":"2025-11-14T03:18:07","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/"},"modified":"2025-11-14T03:18:07","modified_gmt":"2025-11-14T03:18:07","slug":"svg-use-css-custom-properties","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/","title":{"rendered":"SVGs with `<use>` &#038; CSS Custom Properties"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>In the world of web development, SVGs (Scalable Vector Graphics) have become a powerful tool for creating stunning visuals. In this sixth part of our <strong>Smashing Animations<\/strong> series, we will dive into the use of the `<use>` element and CSS custom properties to create magnificent SVG animations. By utilizing these techniques, developers can enhance the user experience and improve the aesthetic appeal of their web applications.<\/p>\n<h2>What is SVG?<\/h2>\n<p>SVG stands for Scalable Vector Graphics. It is an XML-based format for vector graphics that allows for high-quality graphics that are scalable to any size without losing image quality. SVGs can be manipulated with CSS and JavaScript, making them incredibly versatile for web design.<\/p>\n<h2>Understanding `<use>` in SVG<\/h2>\n<p>The `<use>` element in SVG is a powerful feature that allows you to reuse existing SVG elements. This not only minimizes the amount of code you write but also helps in maintaining consistency across your graphics. Here&#8217;s how to use it effectively:<\/p>\n<h3>Basic Syntax of `<use>`<\/h3>\n<p>The syntax for the `<use>` element is straightforward:<\/p>\n<pre><code>&lt;use href=\"#idOfElement\" \/&gt;<\/code><\/pre>\n<p>Here, <code>href<\/code> refers to the ID of the SVG element that you want to reuse.<\/p>\n<h3>Example of Using `<use>`<\/h3>\n<p>Let&#8217;s look at a simple example:<\/p>\n<pre><code>&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\"&gt;\n    &lt;symbol id=\"icon-star\" viewBox=\"0 0 24 24\"&gt;\n      &lt;path d=\"M12 .587l3.668 7.43 8.174 1.185-5.913 5.759 1.396 8.131L12 18.897l-7.325 3.851 1.396-8.131-5.913-5.759 8.174-1.185z\" \/&gt;\n    &lt;\/symbol&gt;\n    &lt;use href=\"#icon-star\" \/&gt;\n  &lt;\/svg&gt;<\/code><\/pre>\n<h2>CSS Custom Properties: A Game Changer<\/h2>\n<p>CSS custom properties (also known as CSS variables) allow you to define reusable values throughout your stylesheet. By leveraging these properties, you can easily manipulate the colors, sizes, and other attributes of your SVGs.<\/p>\n<h3>Defining Custom Properties<\/h3>\n<p>Custom properties are defined using the <code>--property-name<\/code> syntax:<\/p>\n<pre><code>:root {\n    --primary-color: #3498db;\n    --secondary-color: #2ecc71;\n  }<\/code><\/pre>\n<h3>Integrating CSS Custom Properties with SVG<\/h3>\n<p>Now, let\u2019s see how to integrate these properties into our SVG example:<\/p>\n<pre><code>&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" style=\"fill: var(--primary-color);\"&gt;\n    &lt;use href=\"#icon-star\" \/&gt;\n  &lt;\/svg&gt;<\/code><\/pre>\n<h3>Animating SVGs with CSS<\/h3>\n<p>Animation can be added by using CSS transitions alongside custom properties. Here\u2019s a simple animation example:<\/p>\n<pre><code>&lt;style&gt;\n    svg {\n      transition: fill 0.3s ease;\n    }\n    svg:hover {\n      fill: var(--secondary-color);\n    }\n  &lt;\/style&gt;<\/code><\/pre>\n<h2>Step-by-Step Guide to Creating SVG Animations<\/h2>\n<ol>\n<li>Define your SVG symbols using the <code>&lt;symbol&gt;<\/code> element.<\/li>\n<li>Use the <code>&lt;use&gt;<\/code> element to reference those symbols.<\/li>\n<li>Define CSS custom properties for colors and other attributes.<\/li>\n<li>Add CSS styles to control the appearance and animations.<\/li>\n<li>Test your SVG in different browsers to ensure consistency.<\/li>\n<\/ol>\n<h2>FAQs<\/h2>\n<h3>Can I animate SVGs using JavaScript?<\/h3>\n<p>Yes, you can use JavaScript to manipulate SVG properties dynamically. Libraries like <a href=\"https:\/\/greensock.com\/gsap\/\">GSAP<\/a> make this process easier.<\/p>\n<h3>Are there any browser compatibility issues with SVGs?<\/h3>\n<p>SVGs are widely supported across modern browsers. However, it&#8217;s good practice to test on older versions or specific mobile browsers.<\/p>\n<h3>What tools can help optimize SVG files?<\/h3>\n<p>You can use tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> and <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> from WebToolsLab to optimize your SVG files.<\/p>\n<h2>Conclusion<\/h2>\n<p>By effectively using the `<use>` element and CSS custom properties, you can create beautiful, animated SVGs that enhance the user experience on your website. With the knowledge gained in this article, you&#8217;re well on your way to mastering SVG animations. Don&#8217;t forget to explore other tools in the <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a> to further streamline your development process!<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Explore SVGs with `<use>` and CSS custom properties in this guide to create stunning animations. Step-by-step examples included.<\/p>\n","protected":false},"author":1,"featured_media":2860,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-3698","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>SVGs with `` &amp; CSS Custom Properties - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Explore SVGs with `` and CSS custom properties in this guide to create stunning animations. Step-by-step examples included.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVGs with `` &amp; CSS Custom Properties - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Explore SVGs with `` and CSS custom properties in this guide to create stunning animations. Step-by-step examples included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-14T03:18:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1820\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"SVGs with `` &#038; CSS Custom Properties\",\"datePublished\":\"2025-11-14T03:18:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/\"},\"wordCount\":469,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246079143.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/\",\"name\":\"SVGs with `` & CSS Custom Properties - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246079143.webp\",\"datePublished\":\"2025-11-14T03:18:07+00:00\",\"description\":\"Explore SVGs with `` and CSS custom properties in this guide to create stunning animations. Step-by-step examples included.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246079143.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246079143.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752246079143\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/svg-use-css-custom-properties\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVGs with `` &#038; CSS Custom Properties\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SVGs with `` & CSS Custom Properties - WebToolsLab","description":"Explore SVGs with `` and CSS custom properties in this guide to create stunning animations. Step-by-step examples included.","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:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/","og_locale":"en_US","og_type":"article","og_title":"SVGs with `` & CSS Custom Properties - WebToolsLab","og_description":"Explore SVGs with `` and CSS custom properties in this guide to create stunning animations. Step-by-step examples included.","og_url":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/","og_site_name":"WebToolsLab","article_published_time":"2025-11-14T03:18:07+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"SVGs with `` &#038; CSS Custom Properties","datePublished":"2025-11-14T03:18:07+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/"},"wordCount":469,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/","url":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/","name":"SVGs with `` & CSS Custom Properties - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143.webp","datePublished":"2025-11-14T03:18:07+00:00","description":"Explore SVGs with `` and CSS custom properties in this guide to create stunning animations. Step-by-step examples included.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143.webp","width":1820,"height":1024,"caption":"1752246079143"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/svg-use-css-custom-properties\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"SVGs with `` &#038; CSS Custom Properties"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246079143.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Explore SVGs with `` and CSS custom properties in this guide to create stunning animations. Step-by-step examples included.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=3698"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3698\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2860"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}