{"id":3704,"date":"2025-11-14T14:23:08","date_gmt":"2025-11-14T14:23:08","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/"},"modified":"2025-11-14T14:23:08","modified_gmt":"2025-11-14T14:23:08","slug":"smashing-animations-part-6-svg-use-css-properties","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/","title":{"rendered":"Smashing Animations Part 6: Magnificent SVGs With `<use>`"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>In the world of web development, animations can bring your projects to life. In this installment of our <strong>Smashing Animations<\/strong> series, we dive into the realm of scalable vector graphics (SVGs) using the `<use>` element and CSS custom properties. This combination allows for highly efficient and maintainable animations. Let&#8217;s explore how to make magnificent SVG animations that are both functional and visually stunning!<\/p>\n<h2>Understanding SVGs and the `<use>` Element<\/h2>\n<p>SVG (Scalable Vector Graphics) is an XML-based format for vector graphics. One of the powerful features of SVG is the `<use>` element, which allows you to reuse existing SVG elements throughout your document. This is particularly useful when you want to create multiple instances of the same graphic without duplicating code.<\/p>\n<h3>What Are CSS Custom Properties?<\/h3>\n<p>CSS custom properties, also known as CSS variables, are entities defined by CSS authors that contain specific values to be reused throughout a document. These variables make it easier to manage styles and create responsive designs.<\/p>\n<h2>Step-by-Step Guide to Creating SVG Animations<\/h2>\n<h3>Step 1: Setting Up Your SVG<\/h3>\n<pre><code>&lt;svg width=\"200\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\n  &lt;symbol id=\"icon-star\" viewBox=\"0 0 24 24\"&gt;\n    &lt;path d=\"M12 17.27L18.18 21 16.54 13.97 22 9.24l-9.19-.78L12 2 10.19 8.46 1 9.24l5.46 4.73L5.82 21z\" \/&gt;\n  &lt;\/symbol&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<p>In the code above, we create an SVG containing a star icon defined within a `<symbol>` element. This allows us to reuse the star icon easily.<\/p>\n<h3>Step 2: Using the `<use>` Element<\/h3>\n<pre><code>&lt;svg width=\"200\" height=\"200\"&gt;\n  &lt;use href=\"#icon-star\" fill=\"currentColor\" style=\"--star-color: gold;\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<p>Here, we use the `<use>` element to reference our star icon. The `fill` attribute allows us to change the color of the icon dynamically using CSS custom properties.<\/p>\n<h3>Step 3: Applying CSS Styles<\/h3>\n<pre><code>svg {\n  width: 100px;\n  height: 100px;\n  transition: fill 0.3s ease;\n}\n\nsvg:hover {\n  fill: var(--star-color);\n}<\/code><\/pre>\n<p>In the CSS above, we define a hover effect for our SVG, changing the fill color to the value of the `&#8211;star-color` variable. This creates a smooth transition effect on hover, enhancing user interaction.<\/p>\n<h3>Step 4: Creating Multiple Instances<\/h3>\n<pre><code>&lt;svg width=\"200\" height=\"200\"&gt;\n  &lt;use href=\"#icon-star\" fill=\"currentColor\" style=\"--star-color: gold;\" \/&gt;\n&lt;\/svg&gt;\n\n&lt;svg width=\"200\" height=\"200\"&gt;\n  &lt;use href=\"#icon-star\" fill=\"currentColor\" style=\"--star-color: red;\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<p>By changing the `&#8211;star-color` variable in the inline style, you can create multiple instances of the star icon with different colors without duplicating the SVG code.<\/p>\n<h2>Advanced Animations with CSS<\/h2>\n<p>To take your SVG animations a step further, consider using keyframe animations. Here\u2019s how you can add a pulsating effect to your star icon:<\/p>\n<pre><code>@keyframes pulse {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n\nsvg:hover {\n  animation: pulse 1s infinite;\n}<\/code><\/pre>\n<p>By applying this animation on hover, your star icon will grow and shrink, creating an eye-catching effect that draws attention.<\/p>\n<h2>FAQs<\/h2>\n<h3>What browsers support SVG and the `<use>` element?<\/h3>\n<p>Most modern browsers, including Chrome, Firefox, Safari, and Edge, fully support SVG and the `<use>` element. However, always check compatibility for specific features when dealing with older versions.<\/p>\n<h3>How do I optimize my SVG files?<\/h3>\n<p>You can use various tools to optimize SVG files, such as the <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> for cleaning up SVG markup, or the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> for optimizing styles.<\/p>\n<h3>Are there any tools for generating SVGs?<\/h3>\n<p>Yes, there are many design tools available for creating SVGs, including Figma and Adobe Illustrator. Additionally, you can find resources online for free SVG icons.<\/p>\n<h2>Conclusion<\/h2>\n<p>Using the `<use>` element and CSS custom properties together allows you to create dynamic and efficient SVG animations. This method not only reduces code duplication but also enhances maintainability, making it a favorite among developers. By following the steps outlined in this guide, you can create stunning SVG animations that improve the user experience on your web projects. To further enhance your workflow, explore the various tools available at <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a>.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create stunning SVG animations using `<use>` and CSS custom properties in this step-by-step guide.<\/p>\n","protected":false},"author":1,"featured_media":2868,"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-3704","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=\"Learn how to create stunning SVG animations using `` and CSS custom properties in this step-by-step guide.\" \/>\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\/smashing-animations-part-6-svg-use-css-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=\"Learn how to create stunning SVG animations using `` and CSS custom properties in this step-by-step guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-14T14:23:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.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\\\/smashing-animations-part-6-svg-use-css-properties\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Smashing Animations Part 6: Magnificent SVGs With ``\",\"datePublished\":\"2025-11-14T14:23:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/\"},\"wordCount\":520,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245861013.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/\",\"name\":\"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245861013.webp\",\"datePublished\":\"2025-11-14T14:23:08+00:00\",\"description\":\"Learn how to create stunning SVG animations using `` and CSS custom properties in this step-by-step guide.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-properties\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245861013.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245861013.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752245861013\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-6-svg-use-css-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":"Learn how to create stunning SVG animations using `` and CSS custom properties in this step-by-step guide.","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\/smashing-animations-part-6-svg-use-css-properties\/","og_locale":"en_US","og_type":"article","og_title":"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab","og_description":"Learn how to create stunning SVG animations using `` and CSS custom properties in this step-by-step guide.","og_url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/","og_site_name":"WebToolsLab","article_published_time":"2025-11-14T14:23:08+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.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\/smashing-animations-part-6-svg-use-css-properties\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Smashing Animations Part 6: Magnificent SVGs With ``","datePublished":"2025-11-14T14:23:08+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/"},"wordCount":520,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/","url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/","name":"Smashing Animations Part 6: Magnificent SVGs With `` - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","datePublished":"2025-11-14T14:23:08+00:00","description":"Learn how to create stunning SVG animations using `` and CSS custom properties in this step-by-step guide.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-properties\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","width":1820,"height":1024,"caption":"1752245861013"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-6-svg-use-css-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\/1752245861013.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to create stunning SVG animations using `` and CSS custom properties in this step-by-step guide.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3704","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=3704"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3704\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2868"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}