{"id":1091,"date":"2023-02-16T08:19:05","date_gmt":"2023-02-16T08:19:05","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=1091"},"modified":"2023-03-31T07:11:23","modified_gmt":"2023-03-31T07:11:23","slug":"svg-to-css","status":"publish","type":"page","link":"https:\/\/hsuper.tools\/svg-to-css\/","title":{"rendered":"SVG To CSS Converter"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-base-3-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<section><div class=\"wrapper\">\n      <header class=\"header\">\n        <h1>SVG To CSS Converter <\/h1>\n      <\/header>\n\n      <main>\n        <div class=\"panel\">\n\n          <div class=\"options\">\n              External quotes:\n              <label class=\"options__label\">\n                <input type=\"radio\" value=\"single\" name=\"quotes\" class=\"options__input visuallyhidden\">\n                <span class=\"options__text\">single<\/span>\n              <\/label>\n\n              <span class=\"options__middle-word\">\/<\/span>\n\n              <label class=\"options__label\">\n                <input type=\"radio\" value=\"double\" name=\"quotes\" class=\"options__input visuallyhidden\" checked=\"\">\n                <span class=\"options__text\">double<\/span>\n              <\/label>\n          <\/div>\n        <\/div>\n\n        <div class=\"containers\">\n          <div class=\"container container--left container container--init\">\n              <h4>Insert SVG From Illustrator<\/h4>\n\n              <button class=\"button-example\">Example<\/button><br>\n\n              <textarea name=\"init\" id=\"init\" spellcheck=\"false\"><\/textarea>\n          <\/div>\n\n          <div class=\"container container--right container container--result\">\n            <h4>Take your encoded:<\/h4>\n\n            <button id=\"copy-result-button\" title=\"Copy encoded results to clipboard\" class=\"copy-button\">Copy code<\/button><br>\n\n            <textarea name=\"result\" id=\"result\" spellcheck=\"false\"><\/textarea>\n\n            <div class=\"tip\">You may place encoded SVG here to decode it back<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"containers\">\n          <div class=\"container container--left container container--result-css\">\n            <h4>Copy for CSS:<\/h4>\n\n            <button id=\"copy-css-result-button\" title=\"Copy CSS results to clipboard\" class=\"copy-button\">Copy Code<\/button>\n<br>\n            <textarea name=\"result-css\" id=\"result-css\" spellcheck=\"false\"><\/textarea>\n          <\/div>\n\n          <div class=\"container container--right container container--demo\">\n            <h4>Preview:<\/h4>\n\n            <div class=\"contrast-buttons\">\n              <button type=\"button\" class=\"contrast-button contrast-button--white\" data-color=\"white\" title=\"white\">\n                <span class=\"visuallyhidden\">white<\/span>\n              <\/button>\n\n              <button type=\"button\" class=\"contrast-button contrast-button--silver\" data-color=\"silver\" title=\"silver\">\n                <span class=\"visuallyhidden\">silver<\/span>\n              <\/button>\n\n              <button type=\"button\" class=\"contrast-button contrast-button--black\" data-color=\"black\" title=\"black\">\n                <span class=\"visuallyhidden\">black<\/span>\n              <\/button>\n            <\/div>\n\n            <div class=\"demo-wrapper\">\n              <div id=\"demo\" class=\"demo\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/main>\n    <\/section>\n\n\n\n\n<script>\nconst doc = document;\n\nconst initTextarea = doc.querySelector(`#init`);\nconst resultTextarea = doc.querySelector(`#result`);\nconst resultCssTextarea = doc.querySelector(`#result-css`);\nconst resultDemo = doc.querySelector(`#demo`);\nconst demoWrapper = doc.querySelector(`.demo-wrapper`);\nconst contrastButtons = doc.querySelectorAll(`.contrast-button`);\nlet contrastButtonCurrent = null;\nlet backgroundColor = ``;\n\nconst expanders = doc.querySelectorAll(`.expander`);\nconst expandedClass = `expanded`;\nconst symbols = \/[\\r\\n%#()<>?[\\\\\\]^`{|}]\/g;\n\nconst quotesInputs = document.querySelectorAll(`.options__input`);\nlet externalQuotesValue = document.querySelector(`.options__input:checked`).value;\nlet quotes = getQuotes();\n\nconst buttonExample = document.querySelector(`.button-example`);\n\n\/\/ Textarea Actions\n\/\/ ----------------------------------------\n\ninitTextarea.oninput = function () {\n  getResults();\n};\n\nresultTextarea.oninput = function () {\n  const value = resultTextarea.value.trim()\n    .replace(\/background-image:\\s{0,}url\\(\/, ``)\n    .replace(\/[\"']{0,}data:image\\\/svg\\+xml,\/, ``)\n    .replace(\/[\"']\\);{0,}$\/, ``);\n  initTextarea.value = decodeURIComponent(value);\n  getResults();\n};\n\nfunction getResults () {\n  if (!initTextarea.value) {\n    resultCssTextarea.value = ``;\n    resultDemo.setAttribute(`style`, ``);\n    return;\n  }\n\n  const namespaced = addNameSpace(initTextarea.value);\n  const escaped = encodeSVG(namespaced);\n  resultTextarea.value = escaped;\n  const resultCss = `background-image: url(${quotes.level1}data:image\/svg+xml,${escaped}${quotes.level1});`;\n  resultCssTextarea.value = resultCss;\n  resultDemo.setAttribute(`style`, resultCss);\n}\n\n\n\/\/ Switch quotes\n\/\/ ----------------------------------------\n\nquotesInputs.forEach(input => {\n  input.addEventListener(`input`, function () {\n    externalQuotesValue = this.value;\n    quotes = getQuotes();\n    getResults();\n  });\n});\n\n\/\/ Set example\n\/\/ ----------------------------------------\n\nbuttonExample.addEventListener(`click`, () => {\n  initTextarea.value = `<svg id=\"Capa_1\" enable-background=\"new 0 0 512 512\" height=\"130\" viewBox=\"0 0 512 512\" width=\"130a\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g><g><g><path d=\"m0 256c0 141.385 114.615 256 256 256l57.394-256-57.394-256c-141.385 0-256 114.615-256 256z\" fill=\"#ffe278\"\/><path d=\"m256 0v512c141.385 0 256-114.615 256-256s-114.615-256-256-256z\" fill=\"#ffc178\"\/><\/g><g><g><path d=\"m229.169 179.83h-30c0-12.992-10.57-23.562-23.562-23.562-12.993 0-23.563 10.57-23.563 23.562h-30c0-29.534 24.028-53.562 53.563-53.562s53.562 24.028 53.562 53.562z\" fill=\"#5e59ce\"\/><\/g><\/g><g><path d=\"m389.956 179.83h-30c0-12.992-10.57-23.562-23.563-23.562-12.992 0-23.562 10.57-23.562 23.562h-30c0-29.534 24.028-53.562 53.562-53.562s53.563 24.028 53.563 53.562z\" fill=\"#453d81\"\/><\/g><g><path d=\"m106.972 256v19.131c0 82.306 66.722 149.028 149.028 149.028l26.831-98.912-26.831-69.247z\" fill=\"#5e59ce\"\/><\/g><\/g><path d=\"m256 256v168.159c82.306 0 149.028-66.722 149.028-149.028v-19.131z\" fill=\"#453d81\"\/><\/g><\/svg>`;\n  getResults();\n});\n\n\/\/ Demo Background Switch\n\/\/ ----------------------------------------\n\nfunction contrastButtonsSetCurrent (button) {\n  const classCurrent = `contrast-button--current`;\n\n  if (contrastButtonCurrent) {\n    contrastButtonCurrent.classList.remove(classCurrent);\n  }\n\n  backgroundColor = button.dataset.color;\n  contrastButtonCurrent = button;\n  button.classList.add(classCurrent);\n}\n\ncontrastButtons.forEach(button => {\n  if (!backgroundColor) {\n    contrastButtonsSetCurrent(button);\n  }\n\n  button.addEventListener(`click`, function () {\n    contrastButtonsSetCurrent(this);\n    demoWrapper.style.background = backgroundColor;\n  });\n});\n\n\/\/ Namespace\n\/\/ ----------------------------------------\n\nfunction addNameSpace (data) {\n  if (data.indexOf(`http:\/\/www.w3.org\/2000\/svg`) < 0) {\n    data = data.replace(\/<svg\/g, `<svg xmlns=${quotes.level2}http:\/\/www.w3.org\/2000\/svg${quotes.level2}`);\n  }\n\n  return data;\n}\n\n\/\/ Encoding\n\/\/ ----------------------------------------\n\nfunction encodeSVG (data) {\n  \/\/ Use single quotes instead of double to avoid encoding.\n  if (externalQuotesValue === `double`) {\n    data = data.replace(\/\"\/g, `'`);\n  } else {\n    data = data.replace(\/'\/g, `\"`);\n  }\n\n  data = data.replace(\/>\\s{1,}<\/g, `><`);\n  data = data.replace(\/\\s{2,}\/g, ` `);\n\n  \/\/ Using encodeURIComponent() as replacement function\n  \/\/ allows to keep result code readable\n  return data.replace(symbols, encodeURIComponent);\n}\n\n\/\/ Get quotes for levels\n\/\/ ----------------------------------------\n\nfunction getQuotes () {\n  const double = `\"`;\n  const single = `'`;\n\n  return {\n    level1: externalQuotesValue === `double` ? double : single,\n    level2: externalQuotesValue === `double` ? single : double\n  };\n}\n\n\/\/ Copy to clipboard\n\/\/ ----------------------------------------\n\nconst copyResultButton = document.getElementById(`copy-result-button`);\nconst copyCSSResultButton = document.getElementById(`copy-css-result-button`);\n\ncopyResultButton.addEventListener(`click`, function (event) {\n  const textToCopy = document.getElementById(`result`);\n  textToCopy.select();\n  document.execCommand(`copy`);\n});\n\ncopyCSSResultButton.addEventListener(`click`, function (event) {\n  const textToCopy = document.getElementById(`result-css`);\n  textToCopy.select();\n  document.execCommand(`copy`);\n});\n\n\/\/ Common\n\/\/ ----------------------------------------\n\n\/\/ eslint-disable-next-line no-unused-vars\nfunction out (data) {\n  console.log(data);\n}\n<\/script>\n\n\n\n\n<style>\n   section{\n         margin-top:60px;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 25px;\n      }\n\n<\/style>\n<\/div>\n<\/div>\n\n\n\n<p>Convert your SVG files to CSS code quickly and easily using our free online converter.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SVG To CSS Converter External quotes: single \/ double Insert SVG From Illustrator Example Take your encoded: Copy code You may place encoded SVG here to decode it back Copy for CSS: Copy Code Preview: white silver black Convert your SVG files to CSS code quickly and easily using our free online converter.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SVG To CSS Converter - H-SUPERTOOLS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hsuper.tools\/svg-to-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG To CSS Converter - H-SUPERTOOLS\" \/>\n<meta property=\"og:description\" content=\"SVG To CSS Converter External quotes: single \/ double Insert SVG From Illustrator Example Take your encoded: Copy code You may place encoded SVG here to decode it back Copy for CSS: Copy Code Preview: white silver black Convert your SVG files to CSS code quickly and easily using our free online converter.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hsuper.tools\/svg-to-css\/\" \/>\n<meta property=\"og:site_name\" content=\"H-SUPERTOOLS\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-31T07:11:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hsuper.tools\/svg-to-css\/\",\"url\":\"https:\/\/hsuper.tools\/svg-to-css\/\",\"name\":\"SVG To CSS Converter - H-SUPERTOOLS\",\"isPartOf\":{\"@id\":\"https:\/\/hsuper.tools\/#website\"},\"datePublished\":\"2023-02-16T08:19:05+00:00\",\"dateModified\":\"2023-03-31T07:11:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hsuper.tools\/svg-to-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hsuper.tools\/svg-to-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hsuper.tools\/svg-to-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hsuper.tools\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG To CSS Converter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hsuper.tools\/#website\",\"url\":\"https:\/\/hsuper.tools\/\",\"name\":\"H-SUPERTOOLS\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/hsuper.tools\/#\/schema\/person\/2377e1ca07cc9b38c12ad1dea544fd0f\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hsuper.tools\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/hsuper.tools\/#\/schema\/person\/2377e1ca07cc9b38c12ad1dea544fd0f\",\"name\":\"fly seo tool\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hsuper.tools\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/hsuper.tools\/wp-content\/uploads\/2023\/04\/hsupertool_logo.png\",\"contentUrl\":\"https:\/\/hsuper.tools\/wp-content\/uploads\/2023\/04\/hsupertool_logo.png\",\"width\":915,\"height\":149,\"caption\":\"fly seo tool\"},\"logo\":{\"@id\":\"https:\/\/hsuper.tools\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SVG To CSS Converter - H-SUPERTOOLS","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:\/\/hsuper.tools\/svg-to-css\/","og_locale":"en_US","og_type":"article","og_title":"SVG To CSS Converter - H-SUPERTOOLS","og_description":"SVG To CSS Converter External quotes: single \/ double Insert SVG From Illustrator Example Take your encoded: Copy code You may place encoded SVG here to decode it back Copy for CSS: Copy Code Preview: white silver black Convert your SVG files to CSS code quickly and easily using our free online converter.","og_url":"https:\/\/hsuper.tools\/svg-to-css\/","og_site_name":"H-SUPERTOOLS","article_modified_time":"2023-03-31T07:11:23+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hsuper.tools\/svg-to-css\/","url":"https:\/\/hsuper.tools\/svg-to-css\/","name":"SVG To CSS Converter - H-SUPERTOOLS","isPartOf":{"@id":"https:\/\/hsuper.tools\/#website"},"datePublished":"2023-02-16T08:19:05+00:00","dateModified":"2023-03-31T07:11:23+00:00","breadcrumb":{"@id":"https:\/\/hsuper.tools\/svg-to-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hsuper.tools\/svg-to-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hsuper.tools\/svg-to-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hsuper.tools\/"},{"@type":"ListItem","position":2,"name":"SVG To CSS Converter"}]},{"@type":"WebSite","@id":"https:\/\/hsuper.tools\/#website","url":"https:\/\/hsuper.tools\/","name":"H-SUPERTOOLS","description":"","publisher":{"@id":"https:\/\/hsuper.tools\/#\/schema\/person\/2377e1ca07cc9b38c12ad1dea544fd0f"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hsuper.tools\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/hsuper.tools\/#\/schema\/person\/2377e1ca07cc9b38c12ad1dea544fd0f","name":"fly seo tool","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hsuper.tools\/#\/schema\/person\/image\/","url":"https:\/\/hsuper.tools\/wp-content\/uploads\/2023\/04\/hsupertool_logo.png","contentUrl":"https:\/\/hsuper.tools\/wp-content\/uploads\/2023\/04\/hsupertool_logo.png","width":915,"height":149,"caption":"fly seo tool"},"logo":{"@id":"https:\/\/hsuper.tools\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hsuper.tools\/wp-json\/wp\/v2\/pages\/1091"}],"collection":[{"href":"https:\/\/hsuper.tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hsuper.tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hsuper.tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hsuper.tools\/wp-json\/wp\/v2\/comments?post=1091"}],"version-history":[{"count":1,"href":"https:\/\/hsuper.tools\/wp-json\/wp\/v2\/pages\/1091\/revisions"}],"predecessor-version":[{"id":3769,"href":"https:\/\/hsuper.tools\/wp-json\/wp\/v2\/pages\/1091\/revisions\/3769"}],"wp:attachment":[{"href":"https:\/\/hsuper.tools\/wp-json\/wp\/v2\/media?parent=1091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}