{"id":137139,"date":"2024-10-14T14:40:50","date_gmt":"2024-10-14T09:10:50","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137139"},"modified":"2024-10-16T16:04:09","modified_gmt":"2024-10-16T10:34:09","slug":"re-coloring-svgs-with-css-custom-properties-svg","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/","title":{"rendered":"Re-coloring SVGs with CSS Custom Properties | SVG"},"content":{"rendered":"\n<p>CSS custom properties (also known as variables) allow you to define custom values that can be used throughout your stylesheet. This makes it easier to manage and update styles, especially in responsive web design.<\/p>\n\n\n\n<p><strong>Using Custom Properties to Re-color SVGs<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\">\n<li><strong>Define custom properties:<\/strong> Create custom properties in your CSS file using the &#8212; prefix.<\/li>\n\n\n\n<li><strong>Apply custom properties to SVG elements:<\/strong> Use the var() function to reference custom properties within your SVG elements.<\/li>\n<\/ol>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>:root {<\/p>\n\n\n\n<p>&nbsp; &#8211;primary-color: blue;<\/p>\n\n\n\n<p>&nbsp; &#8211;secondary-color: red;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>svg {<\/p>\n\n\n\n<p>&nbsp; fill: var(&#8211;primary-color);<\/p>\n\n\n\n<p>&nbsp; stroke: var(&#8211;secondary-color);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Advantages of Using Custom Properties<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Centralized control:<\/strong> You can easily modify colors by changing the custom property values.<\/li>\n\n\n\n<li><strong>Responsiveness:<\/strong> You can use media queries to change custom property values based on screen size, creating responsive designs.<\/li>\n\n\n\n<li><strong>Theming:<\/strong> You can create different themes for your website by simply changing the custom property values.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example with Media Queries:<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>:root {<\/p>\n\n\n\n<p>&nbsp; &#8211;primary-color: blue;<\/p>\n\n\n\n<p>&nbsp; &#8211;secondary-color: red;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>@media only screen and (max-width: 600px) {<\/p>\n\n\n\n<p>&nbsp; :root {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &#8211;primary-color: green;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &#8211;secondary-color: yellow;<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Additional Techniques<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using JavaScript:<\/strong> You can dynamically change custom property values using JavaScript to create interactive effects.<\/li>\n\n\n\n<li><strong>Combining with CSS Variables:<\/strong> Combine custom properties with other CSS variables to create complex color schemes.<\/li>\n\n\n\n<li><strong>Leveraging CSS preprocessors:<\/strong> Use preprocessors like Sass or Less to simplify the management of custom properties.<\/li>\n<\/ul>\n\n\n\n<p>By using CSS custom properties, you can effectively re-color SVGs and create dynamic and responsive web designs. This approach provides greater flexibility and control over your styles, making it easier to manage and update your website&#8217;s appearance.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-symbols-svg\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS custom properties (also known as variables) allow you to define custom values that can be used throughout your stylesheet. This makes it easier to manage and update styles, especially in responsive web design. Using Custom Properties to Re-color SVGs Example: CSS :root { &nbsp; &#8211;primary-color: blue; &nbsp; &#8211;secondary-color: red; } svg { &nbsp; fill:&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-137139","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Re-coloring SVGs with CSS Custom Properties | SVG - Tutorial<\/title>\n<meta name=\"description\" content=\"Ace the Certified Responsive Web Design Exam using our comprehensive guide. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Re-coloring SVGs with CSS Custom Properties | SVG - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Ace the Certified Responsive Web Design Exam using our comprehensive guide. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T10:34:09+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/\",\"name\":\"Re-coloring SVGs with CSS Custom Properties | SVG - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-14T09:10:50+00:00\",\"dateModified\":\"2024-10-16T10:34:09+00:00\",\"description\":\"Ace the Certified Responsive Web Design Exam using our comprehensive guide. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Re-coloring SVGs with CSS Custom Properties | SVG\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Re-coloring SVGs with CSS Custom Properties | SVG - Tutorial","description":"Ace the Certified Responsive Web Design Exam using our comprehensive guide. Get Certified Now!","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:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/","og_locale":"en_US","og_type":"article","og_title":"Re-coloring SVGs with CSS Custom Properties | SVG - Tutorial","og_description":"Ace the Certified Responsive Web Design Exam using our comprehensive guide. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T10:34:09+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/","name":"Re-coloring SVGs with CSS Custom Properties | SVG - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-14T09:10:50+00:00","dateModified":"2024-10-16T10:34:09+00:00","description":"Ace the Certified Responsive Web Design Exam using our comprehensive guide. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/re-coloring-svgs-with-css-custom-properties-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Re-coloring SVGs with CSS Custom Properties | SVG"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=137139"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137139\/revisions"}],"predecessor-version":[{"id":137397,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137139\/revisions\/137397"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=137139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=137139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=137139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}