Svg to background Css
Lade dein Svg Bild hoch und als Ergebniss bekommst du einen Css Code , der dir ermöglicht das Bild direkt in der Css einzugeben
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html class="noJS minCSS mobile" lang=en-GB itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>SVG to background-image converter</title>
<script id=declare_globals>
var LS = {
globalJS : "342-globalJS",
prismCSS : "155-prismCSS",
prismJS : "112-prismJS",
socialCSS : "129-socialCSS",
disqusCSS : "107-disqusCSS",
disqusJS : "118-disqusJS"
};
var device="mobile",hasDemo='',d=document,useJS=!1,useCSS=!1,useLocalStorage=!1,useTouch=!1,addDisqus="1",tidyLS = false;
!function(){"use strict";var e=d.documentElement,a=function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}();useLocalStorage=a,e.className=e.className.replace("noJS","hasJS"),d.addEventListener&&d.documentElement.classList&&d.documentElement.classList&&window.File&&window.FileReader&&window.FileList&&(useJS=!0,e.className=e.className.replace("hasJS","useJS")),"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0?(useTouch=!0,e.className+=" useTouch"):e.className+=" noTouch","flex"in e.style&&(useCSS=!0,e.className=e.className.replace("minCSS","useCSS")),performance&&performance.mark&&performance.mark("timeToTitle")}();
if(window.location.hash==="#noAnimations"){d.documentElement.className+=" noAnimations"}
function removeIdNode(i){i&&(i=d.getElementById(i))&&i.parentNode.removeChild(i)}
function scriptWriter(i,s,c){var a=d.createElement("script");a.src=s;a.async=!0;a.id=i;c&&(a.onload=c);d.body.appendChild(a)}
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t||200),a&&n.apply(i,o)}}
window.getFile=k;
function k(l,e,a,f,g,h){var c=d.getElementById(a);if(useJS&&useCSS&&c){if(useLocalStorage)for(a=localStorage.length;a--;)if(localStorage.key(a)===e){c.innerHTML=localStorage.getItem(e);g=!0;removeIdNode(f);break}if(!g){var b=new XMLHttpRequest;b.version=e;b.onload=function(){var a=b.version;200===this.status&&(c.innerHTML=this.responseText,useLocalStorage&&a&&"X"!==a&&(localStorage[a]=this.responseText,tidyLS=!0,console.log(a+" added to local storage")),removeIdNode(f))};b.open("get",l,!0);b.send()}if(h)return h(c)}};
</script>
<style id=basic_styles>
.button,a{text-decoration:none}html{font-family:sans-serif;box-sizing:border-box;overflow-y:scroll}*,:after,:before{box-sizing:inherit}.mobile{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%}body{background:#fafafd;color:#3a2c49}h1,h2,h3,h4{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#4B3D5A;font-weight:400}h2,h3,h4,code{letter-spacing:-.01em}b,strong{font-weight:700}a{color:#236ECE;border-bottom:1px solid #236ECE}a:active,a:focus,a:hover{color:#014cac;border-color:#014cac}a:focus{background-color:#fff;outline:#fff solid .25rem}h1 a,h1 a:active,h1 a:focus,h1 a:hover{color:#4B3D5A;cursor:text;border:0 solid}img{border:0;max-width:100%;vertical-align:top}fieldset{border:0;padding:0;margin:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-decoration,search-cancel-button{-webkit-appearance:none}em,i,q{font-style:italic;padding-right:.1rem}code,kbd,pre{font-family:monospace,monospace}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button,select{text-transform:none}button{cursor:pointer;overflow:visible;vertical-align:bottom}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}pre{overflow:hidden;background-color:#FCFDFA}pre>code{overflow-x:scroll;display:block;padding:1rem}.hide{position:absolute;left:-200em;margin:0}.noscript{font-weight:700;color:#c00}.list--unstyled{list-style-type:none;padding-left:0}.button{display:block;color:#fff;background-color:#666;border:1px solid #242424;text-align:center;cursor:pointer;letter-spacing:1px;border-radius:4px;padding:.618em 1.618em}.smaller{font-size:smaller}small{font-size:small}
.skipToContent{display:block;position:absolute;left:0;top:-4em;padding:.618em 1em;transition:all .4s}
.skipToContent:focus{top:.384em;color:#fff;background:#3B2D4A;z-index:10;left:.384em;outline:.125rem solid #b3d4ff}
</style>
<style id=minimum_styles>
h1{font-size:26px}h2{font-size:22px}h3{font-size:20px}small{font-size:small}hr{box-sizing:content-box;height:0;color:#fff}input{line-height:normal;padding:.156em;width:195px}body{line-height:24px;margin:16px;max-width:34em;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAACIAQMAAADgcTgQAAAAA1BMVEXu7u6DSdFtAAAADElEQVR4XmNAAaMAAAEQAAHPBGa9AAAAAElFTkSuQmCC) 0 -32px repeat-x}article,aside,footer,header,main,nav,section{display:block}h1,h2,h3{margin:42px 0 24px;line-height:1.2em}li{margin:0 0 16px}p{margin:0 0 24px}.content .r{margin:42px 0}.c,.list-nav .logo-li,.logo-svg,.main-header .r,.noJS .js-required,.search-input+button>svg{display:none}ul{margin:0}.list-nav li{display:inline-block;padding-right:1em}article .smaller{margin-bottom:10px}article h2{margin-bottom:6px}.content ul,pre{margin:24px 0}pre>code{padding:12px}
</style>
<style id=local_styles>
.DZ,.DZ input{position:relative}.DZ,.DZ_text-1,.DZ_text-2{display:block}.DZ,.output{overflow:hidden}.DZ input{width:100%;opacity:0;min-height:15rem}@media (max-width:350px){.DZ input{width:268px}}.DZ{border:2px dashed #f90;cursor:pointer}.DZ_text,.DZ_text-1{position:absolute;left:0}.DZ>input+span{z-index:-1}.DZ_text{top:0;right:0;bottom:0;background-color:rgba(255,255,255,.4)}.DZ_text-1{width:100%;top:50%;text-align:center;transform:translateY(-50%);text-transform:uppercase;font-size:1.25rem}.DZ_text-2{font-size:1rem;text-transform:none;margin-top:.5rem;letter-spacing:0;transition:opacity 1s ease-out}.output{max-height:0}.output.ON{max-height:none;overflow:visible}.output h3{margin:1.618rem 0 .618rem}.OUT_btns{margin-top:1.618rem;display:flex;align-content:center;justify-content:space-around;flex-wrap:nowrap}.btn-copy{margin:0 .618rem 0 0}.button.btn-copied{background-color:#477343;border:1px solid #242424}.OUT_fgr{margin:1.618rem 0 0;padding:0}.DZ{transition:background-color .3s ease-out}.DZ.-dragover{background-color:#fff}.DZ .spot{top:0;left:0;width:100%;height:100%;border-radius:0;pointer-events:none}.-dragover .spot{animation:spot-open .6s ease-in}.spotInvalid{background-color:#c00;animation:spot-invalid .6s ease-out}@keyframes spot-invalid{0%{opacity:1;transform:scale(0)}100%{opacity:0;transform:scale(2.4)}}
article, aside, footer, header, main, nav, section {
display: flex;
flex-direction: column;
}
</style>
</head>
<body id="svg_tool" class="svg_tool">
<main id=main aria-label="Page content" tabindex=-1 itemscope itemtype="http://schema.org/BlogPosting" class=inactive>
<header id=main_header aria-labelledby="main_h" class="main-header flex fp ">
<div class=l>
<h1 id=main_h itemprop=headline><a href="/tools/svg-to-background-image-conversion/" tabindex=-1 itemprop=url>
<abbr title="Scalable Vector Graphic">SVG</abbr> to <abbr title="Cascading Style Sheet">CSS</abbr> Hintergrundbildkonverter</a></h1>
<p itemprop=description><i>Formatieren Sie <abbr title="Scalable Vector Graphic">SVG</abbr>
- Bilder in <abbr title="Uniform Resource Identifier">URI</abbr>
s um, um sie als browserübergreifende <abbr title="Cascading Style Sheet">CSS</abbr>
-Hintergrundbilder in Ihrem Stylesheet zu verwenden.</i></p>
</div>
<div class=c></div>
<div class=r aria-hidden=true>
<svg class=header_svg style="max-height:9rem" viewBox="0 0 48 33">
<g fill="#4B3D5A">
<path d="M12.5 12L24 32.5H1L12.4 12z" style="filter:blur(0.2px)"/>
<path d="M29.5 0L47 32.7H12L29.5 0z"/>
<circle cx="5.9" cy="6.1" r="3.7" fill="#fe0" style="filter:blur(0.7px)"/>
<g id="clouds" fill="#eee" style="filter:blur(0.3px)">
<circle cx="27.5" cy="5" r="2"/>
<circle cx="32" cy="4" r="3.5"/>
<circle cx="36" cy="5.5" r="2"/>
<circle cx="38.5" cy="5.25" r="1"/>
</g>
</g>
</svg>
<style>
.main-header > .r {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.7' fill-rule='evenodd' viewBox='0 0 1920 64'%3E%3Cpath fill='%23fcfcfa' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23edf3ed' stroke-width='2.6' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23e4ede4' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3Cpath fill-opacity='.2' d='M20 36c6 0 11 5 11 11s-5 11-11 11S9 53 9 47s5-11 11-11zm8 6a10 10 0 00-16 0c-2 2-2 4-2 6 0 6 4 10 10 10s10-4 10-10c0-2 0-4-2-6z'/%3E%3C/svg%3E");
background-size: 120rem 4rem;}
</style>
</div>
</header>
<div class="content flex fp">
<div class=l itemprop=articleBody>
<h2 class=hide>SVG to CSS background-image conversion</h2>
<form id=svg2css class=js-required>
<label id=lbl_drop_zone for=files class=DZ>
<input type=file id=files multiple>
<span class="DZ_text">
<span class=DZ_text-1>Drag & drop SVG(s) here
<span class=DZ_text-2>Alternatively click to choose file(s)</span>
</span>
</span>
<span id=DZ_spot class=spot></span>
</label>
</form>
<section id=output class=output>
<h3 class=hide>Output SVGs as CSS background-images</h3>
<div class=OUT_btns>
<button id=btn_copy class="button orange btn-copy" data-clipboard-target="#output_area">Copy CSS</button>
<button id=btn_reset class="button lightgrey btn-reset" type=reset>Reset</button>
</div>
<figure class="OUT_fgr shadowlift twist4">
<figcaption class=OUT_cptn>Generated CSS:</figcaption>
<pre class=OUT_pre><code id=output_area class="OUT_code language-css" spellcheck=false contenteditable>
</code></pre>
</figure>
</section>
</div>
</main>
<script id=local_scripts>
var btn_reset = document.getElementById("btn_reset");
if (btn_reset) {
btn_reset.addEventListener("click", function(e){
window.location=window.location.href;
}, false);
}
window.addEventListener("load", function () {
function initCopyButton() {
var btn_copy = document.getElementById("btn_copy");
if (btn_copy) {
btn_copy.initialTextContent = btn_copy.textContent;
btn_copy.addEventListener("click", function(e){
e.preventDefault();
}, false);
}
var clipboard = new Clipboard('#btn_copy');
clipboard.on('success', function(e) {
var btn = e.trigger;
if (btn && btn.textContent === btn.initialTextContent) {
btn.textContent = btn.textContent.replace("Copy", "Copied");
btn.classList.add("btn-copied");
setTimeout(function(){
// reset copy button
btn.textContent = btn.initialTextContent;
btn.classList.remove("btn-copied");
}, 2000);
}
});
}
// Safari cannot find the localstorage embedded function immediately so a small delay added
setTimeout(function() {
// Global function
// scriptWriter("svg-conversion", "svg-conversion.js", false);
scriptWriter("clipboard", "/js_webseite/clipboard.min.js", initCopyButton);
}, 300);
}, false);
</script>
<script defer src="/js_webseite/svg-conversion.min.js"></script>
</body>
</html>