{"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-02-16T08:19:05","modified_gmt":"2023-02-16T08:19:05","slug":"svg-to-css","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/nl_nl\/svg-to-css\/","title":{"rendered":"SVG To CSS"},"content":{"rendered":"<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 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 Encoder From Illustrator <\/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>","protected":false},"excerpt":{"rendered":"<p>SVG Encoder From Illustrator 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<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-1091","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/nl_nl\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/nl_nl\/wp-json\/wp\/v2\/pages\/1091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/nl_nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/nl_nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/nl_nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/nl_nl\/wp-json\/wp\/v2\/comments?post=1091"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/nl_nl\/wp-json\/wp\/v2\/pages\/1091\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/nl_nl\/wp-json\/wp\/v2\/media?parent=1091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}