{"id":3675,"date":"2025-11-11T03:18:35","date_gmt":"2025-11-11T03:18:35","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/"},"modified":"2025-11-11T03:18:35","modified_gmt":"2025-11-11T03:18:35","slug":"magnificent-svgs-with-use-css-custom-properties","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/","title":{"rendered":"Smashing Animations Part 6: Magnificent SVGs With `<use>`"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>Welcome to the sixth part of our <strong>Smashing Animations<\/strong> series! In this installment, we will dive into the magnificent world of SVGs using the `<use>` element and CSS custom properties. This powerful combination allows developers to create visually stunning animations that are both efficient and maintainable.<\/p>\n<h2>What Are SVGs?<\/h2>\n<p>Scalable Vector Graphics (SVG) is a versatile format for two-dimensional graphics that can be scaled without losing quality. SVGs are XML-based, which makes them easy to manipulate with CSS and JavaScript. The `<use>` element allows you to reuse SVG elements, reducing code duplication and improving performance.<\/p>\n<h2>Why Use CSS Custom Properties?<\/h2>\n<p>CSS custom properties (also known as CSS variables) enable you to define reusable values in your stylesheets. They enhance maintainability and allow for dynamic styling changes. By combining SVGs with CSS custom properties, you can create flexible and responsive animations.<\/p>\n<h2>Getting Started<\/h2>\n<p>Let\u2019s create a simple SVG icon and animate it using the `<use>` element and CSS custom properties. Follow these steps:<\/p>\n<h3>Step 1: Create Your SVG<\/h3>\n<pre><code>&lt;svg width=\"0\" height=\"0\" style=\"display:none;\"&gt;\n  &lt;symbol id=\"icon-star\" viewBox=\"0 0 24 24\"&gt;\n    &lt;path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/&gt;\n  &lt;\/symbol&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 2: Use the SVG in Your HTML<\/h3>\n<pre><code>&lt;svg class=\"icon\" aria-hidden=\"true\"&gt;\n  &lt;use href=\"#icon-star\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 3: Style With CSS Custom Properties<\/h3>\n<pre><code>:root {\n  --icon-color: gold;\n  --icon-size: 100px;\n}\n\n.icon {\n  fill: var(--icon-color);\n  width: var(--icon-size);\n  height: var(--icon-size);\n  transition: fill 0.3s ease;\n}\n\n.icon:hover {\n  fill: red;\n}<\/code><\/pre>\n<h3>Step 4: Animate Your SVG<\/h3>\n<pre><code>@keyframes pulse {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.1); }\n  100% { transform: scale(1); }\n}\n\n.icon {\n  animation: pulse 1s infinite;\n}<\/code><\/pre>\n<h2>Testing and Optimization<\/h2>\n<p>To ensure your SVG animations run smoothly, test them across different devices and browsers. Utilize tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> to reduce file sizes and improve loading times. Additionally, you can use the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> for your stylesheets to further optimize performance.<\/p>\n<h2>FAQs<\/h2>\n<h3>Can I animate multiple SVGs using the same CSS custom properties?<\/h3>\n<p>Yes, you can use the same CSS custom properties across multiple SVGs, allowing for consistent styling and animation effects.<\/p>\n<h3>What browsers support SVG animations?<\/h3>\n<p>Most modern browsers support SVG animations. However, it\u2019s always good practice to check compatibility on sites like <a href=\"https:\/\/caniuse.com\/\">Can I use<\/a>.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this tutorial, we explored how to create stunning animations using the `<use>` element in SVGs combined with CSS custom properties. This powerful duo not only enhances your web design but also contributes to better performance and maintainability. Keep experimenting with different animations and styles to bring your web projects to life!<\/p>\n<p>For more tools and tips, visit <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a>.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Explore the power of SVGs with `<use>` and CSS custom properties. Create stunning animations for your web projects.<\/p>\n","protected":false},"author":1,"featured_media":2861,"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-3675","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>Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Explore the power of SVGs with `` and CSS custom properties. Create stunning animations for your web projects.\" \/>\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\/magnificent-svgs-with-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=\"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Explore the power of SVGs with `` and CSS custom properties. Create stunning animations for your web projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-11T03:18:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Smashing Animations Part 6: Magnificent SVGs With ``\",\"datePublished\":\"2025-11-11T03:18:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/\"},\"wordCount\":349,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246053608.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/\",\"name\":\"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246053608.webp\",\"datePublished\":\"2025-11-11T03:18:35+00:00\",\"description\":\"Explore the power of SVGs with `` and CSS custom properties. Create stunning animations for your web projects.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246053608.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246053608.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752246053608\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/magnificent-svgs-with-use-css-custom-properties\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Smashing Animations Part 6: Magnificent SVGs With ``\"}]},{\"@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":"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab","description":"Explore the power of SVGs with `` and CSS custom properties. Create stunning animations for your web projects.","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\/magnificent-svgs-with-use-css-custom-properties\/","og_locale":"en_US","og_type":"article","og_title":"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab","og_description":"Explore the power of SVGs with `` and CSS custom properties. Create stunning animations for your web projects.","og_url":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/","og_site_name":"WebToolsLab","article_published_time":"2025-11-11T03:18:35+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Smashing Animations Part 6: Magnificent SVGs With ``","datePublished":"2025-11-11T03:18:35+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/"},"wordCount":349,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/","url":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/","name":"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608.webp","datePublished":"2025-11-11T03:18:35+00:00","description":"Explore the power of SVGs with `` and CSS custom properties. Create stunning animations for your web projects.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608.webp","width":1820,"height":1024,"caption":"1752246053608"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/magnificent-svgs-with-use-css-custom-properties\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Smashing Animations Part 6: Magnificent SVGs With ``"}]},{"@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\/1752246053608.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246053608.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 the power of SVGs with `` and CSS custom properties. Create stunning animations for your web projects.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3675","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=3675"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3675\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2861"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}