{"id":3416,"date":"2025-10-08T20:27:29","date_gmt":"2025-10-08T20:27:29","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/"},"modified":"2025-10-08T20:27:29","modified_gmt":"2025-10-08T20:27:29","slug":"adaptive-svgs-symbol-use-css-media-queries","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/","title":{"rendered":"Adaptive SVGs with `<symbol>`, `<use>`, and Media Queries"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>As the web continues to evolve, so do the techniques that developers use to create visually appealing and responsive designs. One such technique is the use of Scalable Vector Graphics (SVGs) with adaptive capabilities. In this fifth installment of our <em>Smashing Animations<\/em> series, we&#8217;ll explore how to build adaptive SVGs using the <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code> elements, along with CSS media queries. This approach not only enhances performance but also ensures that your graphics look sharp on all devices.<\/p>\n<h2>Why Use SVGs?<\/h2>\n<p>SVGs are an excellent choice for web graphics due to their scalability and resolution independence. Unlike raster images, SVGs can be resized without losing quality. Additionally, they can be manipulated with CSS and JavaScript, making them versatile for animations and interactivity.<\/p>\n<h3>Benefits of Using `<symbol>` and `<use>`<\/h3>\n<ul>\n<li><strong>Reusability:<\/strong> Define a graphic once and reuse it multiple times, reducing file sizes.<\/li>\n<li><strong>Performance:<\/strong> Load SVG assets efficiently, which is crucial for a fast user experience.<\/li>\n<li><strong>Maintainability:<\/strong> Easier updates and modifications to your SVG graphics.<\/li>\n<\/ul>\n<h2>Step-by-Step Guide to Creating Adaptive SVGs<\/h2>\n<h3>1. Define Your SVG Symbols<\/h3>\n<p>Start by creating an SVG file containing your symbols. It\u2019s best to keep this in a separate file for easier management. Here\u2019s an example:<\/p>\n<pre><code>&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:none;\"&gt;\n  &lt;symbol id=\"icon-star\" viewBox=\"0 0 24 24\"&gt;\n    &lt;path d=\"M12 .587l3.668 7.431 8.209 1.185-5.934 5.779 1.4 8.173L12 18.897l-7.343 3.86 1.4-8.173-5.934-5.779 8.209-1.185z\"\/&gt;\n  &lt;\/symbol&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>2. Use the Symbols in Your HTML<\/h3>\n<p>Now that you have your SVG symbols defined, you can use them throughout your HTML. Use the <code>&lt;use&gt;<\/code> element to reference the symbols:<\/p>\n<pre><code>&lt;svg class=\"icon\"&gt;\n  &lt;use href=\"#icon-star\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>3. Applying CSS Styles<\/h3>\n<p>Next, apply CSS to style the SVGs. Here\u2019s an example of how to change the fill color:<\/p>\n<pre><code>.icon {\n  width: 50px;\n  height: 50px;\n}\n.icon:hover {\n  fill: gold;\n}<\/code><\/pre>\n<h3>4. Media Queries for Adaptive Design<\/h3>\n<p>Utilize CSS media queries to adjust the size and appearance of your SVGs based on screen size. Here\u2019s how to implement it:<\/p>\n<pre><code>@media (max-width: 600px) {\n  .icon {\n    width: 30px;\n    height: 30px;\n  }\n}\n@media (min-width: 601px) and (max-width: 1200px) {\n  .icon {\n    width: 40px;\n    height: 40px;\n  }\n}<\/code><\/pre>\n<h2>Testing Your Adaptive SVGs<\/h2>\n<p>Once you have your SVGs set up, ensure they are responsive and look great on all devices. You can use the <a href=\"https:\/\/webtoolslab.io\/tools\/responsive-simulator.php\">Responsive Simulator<\/a> from WebToolsLab to check how your SVGs render across different screen sizes.<\/p>\n<h2>FAQs<\/h2>\n<h3>What is the purpose of the `<symbol>` element?<\/h3>\n<p>The `<symbol>` element allows you to define reusable SVG graphics that can be referenced later using the `<use>` element. This promotes better performance and maintainability.<\/p>\n<h3>Can I animate SVGs created with `<symbol>`?<\/h3>\n<p>Yes! You can animate SVGs using CSS or JavaScript, just like any other SVG element.<\/p>\n<h3>Are adaptive SVGs SEO-friendly?<\/h3>\n<p>Yes, SVGs are text-based and can be indexed by search engines, especially when they include descriptive titles and descriptions.<\/p>\n<h2>Conclusion<\/h2>\n<p>Creating adaptive SVGs with the <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code> elements, combined with CSS media queries, can significantly enhance your website&#8217;s performance and user experience. By following the steps outlined in this guide, you&#8217;ll be able to create scalable and responsive graphics that look great on any device. For further optimization, consider using tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> and <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> to streamline your code. Check out more tools on <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a> to enhance your web development workflow.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Discover how to create adaptive SVGs using <symbol>, <use>, and CSS media queries to enhance performance and responsiveness.<\/p>\n","protected":false},"author":1,"featured_media":2960,"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-3416","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>Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Discover how to create adaptive SVGs using , , and CSS media queries to enhance performance and responsiveness.\" \/>\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\/adaptive-svgs-symbol-use-css-media-queries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Discover how to create adaptive SVGs using , , and CSS media queries to enhance performance and responsiveness.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-08T20:27:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\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\\\/adaptive-svgs-symbol-use-css-media-queries\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Adaptive SVGs with ``, ``, and Media Queries\",\"datePublished\":\"2025-10-08T20:27:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/\"},\"wordCount\":470,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/output1.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/\",\"name\":\"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/output1.webp\",\"datePublished\":\"2025-10-08T20:27:29+00:00\",\"description\":\"Discover how to create adaptive SVGs using , , and CSS media queries to enhance performance and responsiveness.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/output1.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/output1.webp\",\"width\":1024,\"height\":1024,\"caption\":\"{ \\\"title\\\": \\\"Top 10 Tips for Effective Time Management\\\", \\\"meta\\\": \\\"Discover essential time management tips to boost productivity and achieve your goals. Master your schedule and enhance your work-life balance today!\\\" }\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adaptive SVGs with ``, ``, and Media Queries\"}]},{\"@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":"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab","description":"Discover how to create adaptive SVGs using , , and CSS media queries to enhance performance and responsiveness.","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\/adaptive-svgs-symbol-use-css-media-queries\/","og_locale":"en_US","og_type":"article","og_title":"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab","og_description":"Discover how to create adaptive SVGs using , , and CSS media queries to enhance performance and responsiveness.","og_url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/","og_site_name":"WebToolsLab","article_published_time":"2025-10-08T20:27:29+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.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\/adaptive-svgs-symbol-use-css-media-queries\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Adaptive SVGs with ``, ``, and Media Queries","datePublished":"2025-10-08T20:27:29+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/"},"wordCount":470,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/","url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/","name":"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.webp","datePublished":"2025-10-08T20:27:29+00:00","description":"Discover how to create adaptive SVGs using , , and CSS media queries to enhance performance and responsiveness.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.webp","width":1024,"height":1024,"caption":"{ \"title\": \"Top 10 Tips for Effective Time Management\", \"meta\": \"Discover essential time management tips to boost productivity and achieve your goals. Master your schedule and enhance your work-life balance today!\" }"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Adaptive SVGs with ``, ``, and Media Queries"}]},{"@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\/08\/output1.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.webp",1024,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1-300x300.webp",300,300,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1-768x768.webp",768,768,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.webp",1024,1024,false],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.webp",1024,1024,false],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/08\/output1.webp",1024,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Discover how to create adaptive SVGs using , , and CSS media queries to enhance performance and responsiveness.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3416","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=3416"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3416\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2960"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}