{"id":1078,"date":"2023-02-16T08:13:32","date_gmt":"2023-02-16T08:13:32","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=1078"},"modified":"2023-02-16T08:13:32","modified_gmt":"2023-02-16T08:13:32","slug":"svg-background","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/fr\/svg-background\/","title":{"rendered":"SVG Background"},"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><h1>SVG Background Image<\/h1>\n      <label>Copy &amp; Paste SVG mark-up<\/label><br>\n<input id=\"stringInput\" type=\"text\"><br>\n<label>Class Selector<\/label><br>\n<input id=\"selectorInput\" type=\"text\"><br>\n<button onclick=\"convert()\">Convert<\/button><br>\n<textarea id=\"stringOutput\"><\/textarea>\n\n<div id=\"testArea\" style=\"margin-top: 16px;\"><\/div>\n<br><section>\n\n<script>\n  function convert() {\nvar selector = document.getElementById(\"selectorInput\").value.replace(\/\\.\/g,'') || \"mySelector\";\ndocument.getElementById(\"testArea\").classList.add(selector);\nvar refinedStr = document.getElementById(\"stringInput\").value.replace(\/\\>[\\t ]+\\<\/g, \"><\").replace(\/<!--[\\s\\S]*?-->\/g, '').replace(\/<\\?xml[\\s\\S]*?>\/g, '').replace(\/\\\"\/g, '\\'');\n   if (refinedStr.indexOf('xmlns=') == -1) {\n      refinedStr.replace(\/<svg\/, \"<svg xmlns='http:\/\/www.w3.org\/2000\/svg' \");\n   }\n   refinedStr = refinedStr.replace(\/\\#\/g, '%23').replace(\/\\<\/g, '%3C').replace(\/\\>\/g, '%3E');\ndocument.getElementById(\"stringOutput\").value = '.' + selector +':before {\\ncontent: \"\";\\n    display: block;\\n    background: url(\"data:image\/svg+xml;charset=utf8,' + refinedStr + '\") no-repeat;\\n}'\n}\n  <\/script>\n\n<style>\nsection{\n         margin-top:60px;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 25px;\n      }\ninput[type=\"text\"]{width:100%;}\n<\/style>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>SVG Background Image Copy &amp; Paste SVG mark-up Class Selector Convert<\/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-1078","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/fr\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/pages\/1078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/comments?post=1078"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/pages\/1078\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/media?parent=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}