Depot43-Unterlagen - SVG MeinLogo

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>SVG-Animation - SVG MeinLogo</title>
    <style>
        *, body {
            font-family: Helvetica, sans-serif;
            margin:0;
            padding:0;
	   box-sizing: border-box;
        }
        div.container {
            max-width:500px;
            margin: auto;
            border: 2px solid #efefef;
        }
        header {
            background-color: #efefef;
            padding:12px;
        }
        header #tropfen {
            cursor: pointer;
            transition: fill 2s;
        }
        header #tropfen:hover {
            fill: #f00!important;
        }
        main {
            padding:12px;
        }
    </style>
</head>
    <body>
  <div class="container">
       <header><svg width="100%" height="100%" viewbox="0 0 496 149" version="1.1"><g> 
                      <path d="M90.229,123.457l-18.721,0l-5.321,-41.449l-17.385,41.449l-7.429,0l-16.594,-41.449l-6.111,41.449l-18.668,0l12.234,-71.982l18.51,0l14.556,38.39l15.397,-38.39l18.668,0l10.864,71.982Z" style="fill:#f00;fill-rule:nonzero;"></path><path d="M152.402,102.205l-36.334,0c0,7.348 3.531,11.022 10.593,11.022c3.602,0 6.364,-1.547 8.286,-4.641l16.77,0c-1.336,4.416 -3.305,7.833 -5.906,10.251c-4.711,4.381 -11.022,6.571 -18.932,6.571c-10.055,0 -17.613,-3.058 -22.676,-9.176c-3.797,-4.57 -5.695,-10.142 -5.695,-16.716c0,-7.805 2.373,-14.151 7.119,-19.037c4.746,-4.887 11.443,-7.331 20.092,-7.331c10.652,0 18.263,3.875 22.834,11.623c2.566,4.367 3.849,9.439 3.849,15.215l0,2.219Zm-16.189,-9.861c-1.224,-5.52 -4.494,-8.28 -9.809,-8.28c-2.937,0 -5.315,0.879 -7.134,2.635c-1.433,1.398 -2.343,3.279 -2.727,5.645l19.67,0Z" style="fill:#f00;fill-rule:nonzero;"></path><rect x="162.211" y="74.52" width="17.35" height="48.938" style="fill:#f00;fill-rule:nonzero;"></rect><path d="M243,123.457l-17.35,0l0,-24.75c0,-4.317 -0.489,-7.178 -1.467,-8.582c-1.433,-2.072 -3.581,-3.107 -6.446,-3.107c-2.62,0 -4.821,0.891 -6.603,2.675c-1.608,1.609 -2.411,4.127 -2.411,7.555l0,26.209l-17.35,0l0,-48.937l17.35,0l0,6.169c2,-2.32 3.843,-3.955 5.529,-4.904c2.737,-1.547 6.16,-2.32 10.267,-2.32c5.265,0 9.548,1.424 12.847,4.271c3.756,3.235 5.634,8.086 5.634,14.555l0,31.166Z" style="fill:#f00;fill-rule:nonzero;"></path><path d="M297.633,123.457l-41.186,0l0,-71.982l18.721,0l0,56.373l22.465,0l0,15.609Z" style="fill-rule:nonzero;"></path><path d="M362.549,98.988c0,6.785 -2.233,12.604 -6.697,17.455c-5.414,5.907 -12.991,8.86 -22.729,8.86c-9.773,0 -17.367,-2.953 -22.781,-8.86c-4.465,-4.851 -6.697,-10.81 -6.697,-17.877c0,-6.363 2.25,-12.005 6.75,-16.927c5.449,-5.942 13.201,-8.912 23.255,-8.912c9.246,0 16.629,2.97 22.149,8.912c4.5,4.851 6.75,10.634 6.75,17.349Zm-18.035,0c0,-3.179 -1.111,-5.872 -3.334,-8.079c-2.222,-2.208 -4.908,-3.311 -8.057,-3.311c-3.569,0 -6.474,1.342 -8.713,4.026c-1.82,2.155 -2.73,4.609 -2.73,7.364c0,2.79 0.91,5.262 2.73,7.417c2.239,2.684 5.144,4.027 8.713,4.027c3.184,0 5.879,-1.104 8.084,-3.312c2.204,-2.207 3.307,-4.918 3.307,-8.132Z" style="fill-rule:nonzero;"></path><path d="M427.201,120.082c0,4.289 -0.299,7.752 -0.896,10.389c-0.95,4.218 -3.41,7.998 -7.383,11.338c-5.027,4.218 -11.707,6.328 -20.039,6.328c-8.719,0 -15.662,-2.303 -20.83,-6.908c-3.446,-3.059 -5.643,-6.258 -6.592,-9.598c-0.106,-0.352 -0.246,-1.09 -0.422,-2.215l19.406,0c0.563,1.601 1.319,2.749 2.268,3.445c1.547,1.149 3.516,1.723 5.906,1.723c4.008,0 7.084,-1.419 9.229,-4.258c1.336,-1.787 2.004,-4.345 2.004,-7.675l0,-4.626c-2.072,1.899 -3.81,3.235 -5.215,4.008c-2.913,1.617 -6.354,2.426 -10.321,2.426c-4.986,0 -9.445,-1.283 -13.377,-3.85c-4.037,-2.636 -6.934,-6.24 -8.69,-10.81c-1.193,-3.094 -1.79,-6.451 -1.79,-10.072c0,-8.016 2.546,-14.538 7.637,-19.565c4.739,-4.676 10.444,-7.014 17.115,-7.014c3.546,0 6.706,0.721 9.479,2.163c1.65,0.878 3.371,2.32 5.162,4.324l0,-5.115l17.349,0l0,45.562Zm-16.506,-21.252c0,-3.129 -1.067,-5.818 -3.201,-8.068c-2.135,-2.25 -4.759,-3.375 -7.873,-3.375c-3.464,0 -6.298,1.336 -8.503,4.008c-1.749,2.144 -2.624,4.623 -2.624,7.435c0,3.129 1.076,5.81 3.228,8.042c2.152,2.232 4.785,3.349 7.899,3.349c3.079,0 5.694,-1.117 7.846,-3.349c2.152,-2.232 3.228,-4.913 3.228,-8.042Z" style="fill-rule:nonzero;"></path><path d="M495.967,98.988c0,6.785 -2.233,12.604 -6.697,17.455c-5.415,5.907 -12.991,8.86 -22.729,8.86c-9.773,0 -17.367,-2.953 -22.781,-8.86c-4.465,-4.851 -6.698,-10.81 -6.698,-17.877c0,-6.363 2.251,-12.005 6.75,-16.927c5.45,-5.942 13.202,-8.912 23.256,-8.912c9.246,0 16.629,2.97 22.149,8.912c4.5,4.851 6.75,10.634 6.75,17.349Zm-18.035,0c0,-3.179 -1.111,-5.872 -3.334,-8.079c-2.222,-2.208 -4.908,-3.311 -8.057,-3.311c-3.569,0 -6.474,1.342 -8.714,4.026c-1.819,2.155 -2.729,4.609 -2.729,7.364c0,2.79 0.91,5.262 2.729,7.417c2.24,2.684 5.145,4.027 8.714,4.027c3.184,0 5.879,-1.104 8.084,-3.312c2.204,-2.207 3.307,-4.918 3.307,-8.132Z" style="fill-rule:nonzero;"></path> 
		       </g> 
		       <path d="M170.886,61.975c0,0 22.715,-27.482 22.715,-39.26c0,-12.537 -10.178,-22.715 -22.715,-22.715c-12.537,0 -22.716,10.178 -22.716,22.715c0,11.778 22.716,39.26 22.716,39.26Z" style="stroke:#000;stroke-width:0px;" id="tropfen"></path> 
	       </svg> 
	   </header><main><article><h1>Mit der Maus über den Tropfen fahren!</h1> 
               		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas illum alias fuga distinctio facilis amet, quia, incidunt, earum a maxime quod non corrupti obcaecati voluptatum illo nemo veritatis. Sequi, facere!</p> 
           </article></main><footer>America Design 2017</footer></div>
    </body>
</html>


 

            

Hinweis

Wird eine SVG-Datei innerhalb eines Responsiv-Layouts verwendet, ist es sinnvoll diese innerhalb eines raktionsfähigen HTML-Elements zu platzieren. Die inline geschriebene Grösse der SVG-Datei soll 100% betragen:

<svg width="100%" height="100%" viewbox="0 0 496 149" version="1.1">

So skaliert die SVG-Datei ohne CSS-Angaben mit dem Elternelement. Wird der "#container" (max-width:500px;) vergrössert oder im Bowser zusammengepresst. skalieren die Kind-Elemente "header" und "svg" mit.

Scale SVG

Artikel aus CSS Tricks: https://css-tricks.com/scale-svg/