{"id":3431,"date":"2025-10-10T14:21:44","date_gmt":"2025-10-10T14:21:44","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/"},"modified":"2025-10-10T14:21:44","modified_gmt":"2025-10-10T14:21:44","slug":"smashing-animations-adaptive-svgs-symbol-css","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/","title":{"rendered":"Smashing Animations: Adaptive SVGs with `<symbol>` &#038; CSS"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>In our quest to create engaging web experiences, animations play a crucial role. In this series, we aim to enhance your skills in building animations with a focus on scalability and adaptability. In the fifth installment, we will delve into creating adaptive SVGs using the <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code> elements, combined with CSS media queries.<\/p>\n<h2>Understanding SVG Symbols<\/h2>\n<p>SVG (Scalable Vector Graphics) enables you to create two-dimensional graphics with support for interactivity and animation. The <code>&lt;symbol&gt;<\/code> element is particularly useful for defining reusable graphic objects. This is how you can group SVG elements and use them multiple times throughout your document.<\/p>\n<h3>Benefits of Using Symbols<\/h3>\n<ul>\n<li>Reduces redundancy by enabling reuse of graphic elements.<\/li>\n<li>Improves performance by minimizing the amount of SVG code in your document.<\/li>\n<li>Enhances maintainability of your SVGs, as changes only need to be made in one location.<\/li>\n<\/ul>\n<h2>Creating Your Adaptive SVG<\/h2>\n<h3>Step 1: Define Your SVG Symbols<\/h3>\n<p>Start by creating an SVG file with symbols. Here\u2019s an example:<\/p>\n<pre><code>&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; style=&quot;display:none;&quot;&gt;\n  &lt;symbol id=&quot;icon-star&quot; viewBox=&quot;0 0 24 24&quot;&gt;\n    &lt;polygon points=&quot;12 17.27 18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.46 13.97 5.82 21 &quot; \/&gt;\n  &lt;\/symbol&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 2: Use the Defined Symbols<\/h3>\n<p>Next, you can reference the symbols using the <code>&lt;use&gt;<\/code> element:<\/p>\n<pre><code>&lt;svg class=&quot;icon&quot;&gt;\n  &lt;use href=&quot;#icon-star&quot; \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 3: Style with CSS<\/h3>\n<p>Now, we can style our SVG icons with CSS. Here\u2019s an example that changes the color based on screen size:<\/p>\n<pre><code>.icon {\n  fill: gold;\n}\n\n@media (max-width: 600px) {\n  .icon {\n    fill: silver;\n  }\n}<\/code><\/pre>\n<h3>Step 4: Implement Media Queries<\/h3>\n<p>Using CSS media queries, we can adapt our SVGs based on the viewport size. Here\u2019s an example:<\/p>\n<pre><code>@media (max-width: 400px) {\n  .icon {\n    width: 50px;\n    height: 50px;\n  }\n}\n\n@media (min-width: 401px) and (max-width: 800px) {\n  .icon {\n    width: 75px;\n    height: 75px;\n  }\n}\n\n@media (min-width: 801px) {\n  .icon {\n    width: 100px;\n    height: 100px;\n  }\n}<\/code><\/pre>\n<h2>Testing and Optimization<\/h2>\n<p>After implementing your SVGs, it\u2019s crucial to test their responsiveness across different devices. Use the <a href=\"https:\/\/webtoolslab.io\/tools\/responsive-simulator.php\">Responsive Simulator<\/a> to visualize how your SVGs will appear on various screen sizes.<\/p>\n<h3>Minifying Your Code<\/h3>\n<p>For performance optimization, consider minifying your SVG, CSS, and HTML files. You can use the following tools:<\/p>\n<ul>\n<li><a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a><\/li>\n<li><a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a><\/li>\n<li><a href=\"https:\/\/webtoolslab.io\/tools\/js-minifier.php\">JS Minifier<\/a><\/li>\n<\/ul>\n<h2>FAQs<\/h2>\n<h3>What are SVG symbols?<\/h3>\n<p>SVG symbols are reusable graphic elements defined within an SVG file. They allow for efficient usage and maintainability.<\/p>\n<h3>How do I ensure my SVGs are adaptive?<\/h3>\n<p>By using CSS media queries, you can change the size and appearance of your SVGs based on the viewport dimensions.<\/p>\n<h3>Can I animate SVGs?<\/h3>\n<p>Yes! SVGs can be animated using CSS animations or JavaScript for more complex animations.<\/p>\n<h2>Conclusion<\/h2>\n<p>Building adaptive SVGs using <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code> elements, along with CSS media queries, empowers developers to create visually appealing and responsive web experiences. As you integrate these techniques into your projects, remember to test and optimize for the best performance. Explore more tools at <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab (All Tools)<\/a> to enhance your web development workflow!<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn to build adaptive SVGs with `<symbol>`, `<use>`, and CSS media queries for responsive animations.<\/p>\n","protected":false},"author":1,"featured_media":2875,"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-3431","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: Adaptive SVGs with `` &amp; CSS - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn to build adaptive SVGs with ``, ``, and CSS media queries for responsive animations.\" \/>\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-adaptive-svgs-symbol-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Smashing Animations: Adaptive SVGs with `` &amp; CSS - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn to build adaptive SVGs with ``, ``, and CSS media queries for responsive animations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-10T14:21:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.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-adaptive-svgs-symbol-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Smashing Animations: Adaptive SVGs with `` &#038; CSS\",\"datePublished\":\"2025-10-10T14:21:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/\"},\"wordCount\":404,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/\",\"name\":\"Smashing Animations: Adaptive SVGs with `` & CSS - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"datePublished\":\"2025-10-10T14:21:44+00:00\",\"description\":\"Learn to build adaptive SVGs with ``, ``, and CSS media queries for responsive animations.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"width\":1820,\"height\":1024,\"caption\":\"Illustration showing JavaScript file before and after minification\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-adaptive-svgs-symbol-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Smashing Animations: Adaptive SVGs with `` &#038; CSS\"}]},{\"@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: Adaptive SVGs with `` & CSS - WebToolsLab","description":"Learn to build adaptive SVGs with ``, ``, and CSS media queries for responsive animations.","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-adaptive-svgs-symbol-css\/","og_locale":"en_US","og_type":"article","og_title":"Smashing Animations: Adaptive SVGs with `` & CSS - WebToolsLab","og_description":"Learn to build adaptive SVGs with ``, ``, and CSS media queries for responsive animations.","og_url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/","og_site_name":"WebToolsLab","article_published_time":"2025-10-10T14:21:44+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.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-adaptive-svgs-symbol-css\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Smashing Animations: Adaptive SVGs with `` &#038; CSS","datePublished":"2025-10-10T14:21:44+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/"},"wordCount":404,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/","url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/","name":"Smashing Animations: Adaptive SVGs with `` & CSS - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","datePublished":"2025-10-10T14:21:44+00:00","description":"Learn to build adaptive SVGs with ``, ``, and CSS media queries for responsive animations.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","width":1820,"height":1024,"caption":"Illustration showing JavaScript file before and after minification"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-adaptive-svgs-symbol-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Smashing Animations: Adaptive SVGs with `` &#038; CSS"}]},{"@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\/1752245607672.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.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 to build adaptive SVGs with ``, ``, and CSS media queries for responsive animations.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3431","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=3431"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3431\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2875"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}