SVG
Scale SVG[Bearbeiten]
https://css-tricks.com/scale-svg/ https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds
Wir sind Pixelbilder gewöhnt und erwarten beim Skalieren etwas ähnliches wenn wir mit SVG Grafiken arbeitn. SVGs verhalten sich aber nicht wie Pixelbilder und bieten auch andere Möglichkeiten. Wir müssen der SVG Grafik daher mehr Informationen mitgeben.
Eine SVG Grafik ist keine einzelne Datei sondern sie besteht aus mehreren Teilen (Pfade etc.). Jeder dieser Teile kann sich beim Skalieren anders verhalten. Ein Pfad kann z.B. seine Form vergrößern, aber die Linienstärke bleibt unverändert.
Daher müssen wir bei SVG dem Browser genauer mitteilen was wir tun möchten.
Lösung Img Tag ?[Bearbeiten]
Solange wir ein img Tag nutzen verhält sich ein SVG Bild genau wie ein Pixelbild. Hier übernimmt der Browser das Handling. Allerdings möchten wir manchmal auf die Einzelteile des SVGs zugreifen (z.B. um einzelne Farben zu verändern, interaktive Charts zu erstellen etc.).
SVG Scaling - Übersicht[Bearbeiten]
width und height funktionieren nicht[Bearbeiten]
<svg width="200" height="100">
Gibt nur den Rahmen der Umgebenden Box vor, wenn die SVG Elemente größer sind wird abgeschnitten. Auch umgebende Elemente führen im Zweifel nur zu Scrollbalken. Skalieren funktioniert überhaupt nicht.
Die Lösung: viewBox - x, y, width, height[Bearbeiten]
Das SVG Attribut viewBox definiert den Viewport also den Bezugsrahmen in dem die Elemente platziert sind. Da SVG auch andere Einheiten wie Pixel nutzen kann (z.B. mm etc.) hilft das dem Browser das um am Ende die Ausgabegröße passend zu machen.
* width und height geben die Größe des Viewports vor.
Wenn du die Werte so groß wählst wie die Grafik hat der Viewport Platz für alle Elemente. Wenn deine Elemente z.B. mit 10mm x 5mm angelegt sind kannst du 0 0 10 5 angeben. So passt die Grafik genau in den SVG-Viewport.
Widht und Height skalieren nicht die Inhalte. Deshalb musst du sie groß genug wählen dass alles passt. Sonst wird abgeschnitten. Die Werte nutzen wie gesagt die gleiche Einheit in der das SVG Dokument angelegt ist.
x und y definieren den Ursprung des Koordinatensystems im SVG. Wenn das auf 0,0 steht ist der Ursprung oben links. Das wäre der einfachste Fall. Wenn du width und height groß genug gewählt hast siehst du nun das ganze Bild.
Wenn du x erhöhst wird das Koordinatensystem in der Grafik nach rechts geschoben. Das bedeutet Teile der Grafik liegen jetzt evtl. im negativen x-Bereich. Da der Browser das SVG trotzdem am Ursprung beginnend zeichnet wird der linke Teil der Grafik abgeschnitten, rechts bleibt etwas Leerraum.
Keine viewBox vorhanden?[Bearbeiten]
Manchmal liefern Grafikprogramme keine viewBox mit aber dafür height und width:
<svg width="1000px" height="200px"
Dann kannst du diese Werte in eine viewBox schreiben und dafür width und height leer lassen.
<svg viewBox="0 0 1000 200" width="" height=""
Jetzt kann der Browser das Bild richtig anzeigen. Lasse width und height im Zweifel leer. Es kann sein, dass das Bild durch andere Attribute sonst etwas verschoben ist. Einfach mal testen ob sich was verändert.
Sobald das viewBox Attribut passend im SVG ist, hat der Browser die Informationen um es wie ein normales Bild zu behandeln und skaliert das Bild korrekt.
Du kannst auch Leerraum um die Grafik schaffen, wenn du width und height erhöhst und x und y passend verschiebst
<svg viewBox="-10 0 1020 200"
Hier wird das Koordinatensystem um 10 Einheiten nach links geschoben und um width um 10 erhöht. Dadurch entsteht links und rechts Platz.
SVG skalieren wie Bilder[Bearbeiten]
Bei Pixelbildern kann man das width oder height Attribut setzen. die andere Größe wird dann automatisch vom Browser ermittelt. Bei einem SVG geht das - aber nicht so einfach.
SVG im img Tag[Bearbeiten]
Das funktioniert mit width und height in aktuellen Browsern (Stand 2024) eigentlich überall.
Beispiel (SVG img und SVG Inline in aktuellen Browsern)
CSS width:100%; height: auto; Attribute: width="200" height=""
Flex Box[Bearbeiten]
In fast aktuellen Browsern funktioniert die Positionierung in einer flex Box. Eventuell musst du in sofern du paddings verwendest box-sizing auf border-box setzen.
SVG Background Image[Bearbeiten]
Hier kann man den Aspect Ratio Hack nehmen (auch padding-bottom Hack genannt). Dabei wird eine Box erzeugt die immer das richtige Seitenverhältnis hat. Siehe auch aspect-grid in diesem wikie oder der CSS-Tricks Link oben.
Inline Code skalieren[Bearbeiten]
Können mittlerweile auch die meisten Browser. Setze die viewBox und einen der Attribute width oder height.
Reuse SVG Code[Bearbeiten]
<!-- use like this-->
<svg style="width:220px;" viewBox="0 0 593 90" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<use xlink:href="#svg-wortmarke"></use>
</svg>
<!-- reusable svg -->
<svg viewBox="0 0 593 90" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<g id="svg-wortmarke">
<path d="M53.61.853h12.325v37.588h18.058V.853h12.33V88.47h-12.33V50.89H65.935v37.58H53.61V.853zM276.29.853h38.196v12.325h-25.633v23.68h20.379v12.324h-20.38v26.959h27.217V88.47H276.29V.853zM552.43.853h38.204v12.325h-25.629v23.68h20.37v12.324h-20.37v26.959h27.213V88.47H552.43V.853zM42.71 21.352H30.39c.25-6.838-3.413-9.034-8.784-9.034-5.613 0-9.28 1.342-9.28 7.692v49.3c0 6.342 3.667 7.683 9.28 7.683 5.37 0 9.033-2.195 8.783-9.029H42.71c0 14.404-8.292 21.354-21.354 21.354C8.914 89.318.002 83.34.002 69.31v-49.3C.002 5.98 8.914-.007 21.356-.007c13.062 0 21.354 6.954 21.354 21.359M121.36.853h18.796l15.37 87.617H142.96l-3.42-20.138h-17.572c-1.096 6.225-2.316 14.038-3.416 20.138h-12.567L121.36.853zm15.988 55.042c-2.563-15.504-4.146-24.17-6.588-40.03-2.2 13.422-4.4 26.36-6.592 40.03h13.18zM163.6 88.467V.85h23.063c13.058 0 21.354 6.596 21.354 20.138v14.637c0 8.663-3.784 14.65-9.638 17.82 4.884 11.11 10.371 24.038 15.254 35.022h-12.937l-14.033-32.709h-10.738v32.709H163.6zm23.063-45.034c5.37 0 9.154-1.95 9.029-7.808V20.988c.125-5.734-3.78-7.809-9.271-7.809h-10.496v30.254h10.738zM262.72 21.352h-12.325c.25-6.838-3.413-9.034-8.783-9.034-5.613 0-9.275 1.342-9.275 7.692v49.3c0 6.342 3.662 7.683 9.275 7.683 5.37 0 9.033-1.95 8.783-7.929V49.177h-10.004V36.852h22.329v32.212c0 13.667-8.296 20.254-21.35 20.254-12.446 0-21.358-5.979-21.358-20.008v-49.3c0-14.03 8.912-20.017 21.358-20.017 13.054 0 21.35 6.954 21.35 21.359M325.25 88.467V.85h23.058c13.063 0 21.359 6.596 21.359 20.138v14.637c0 8.663-3.784 14.65-9.642 17.82 4.883 11.11 10.37 24.038 15.254 35.022h-12.937l-14.034-32.709h-10.733v32.709H325.25zm23.058-45.034c5.367 0 9.155-1.95 9.03-7.808V20.988c.125-5.734-3.775-7.809-9.271-7.809h-10.492v30.254h10.733zM427.51 21.352h-12.325c.254-6.838-3.413-9.034-8.78-9.034-5.616 0-9.278 1.342-9.278 7.692v49.3c0 6.342 3.662 7.683 9.279 7.683 5.366 0 9.033-2.195 8.779-9.029h12.325c0 14.404-8.296 21.354-21.35 21.354-12.446 0-21.358-5.979-21.358-20.008v-49.3c0-14.03 8.912-20.017 21.358-20.017 13.054 0 21.35 6.954 21.35 21.359M450.72.85v68.582c0 6.338 3.658 7.563 9.275 7.563 5.246 0 9.03-1.825 8.783-7.93V.85h12.325v68.217c0 13.787-8.295 20.254-21.354 20.254-12.45 0-21.358-5.858-21.358-19.888V.85h12.329zM495.78.853h22.82c12.81 0 19.888 7.204 19.888 19.892v8.542c0 5.129-.12 11.47-7.808 13.179 7.446 1.346 9.517 7.57 9.517 14.275v11.841c0 12.692-7.196 19.888-19.888 19.888H495.78V.853zm30.383 19.284c-.116-4.513-2.195-6.959-7.562-6.959h-10.492v23.68h10.492c5.367 0 7.446-2.442 7.562-6.959v-9.762zm1.588 35.87c-.121-4.508-2.071-6.825-7.442-6.825h-12.2v26.959h12.2c5.371 0 7.321-2.438 7.442-6.954v-13.18z" fill="#fff" fill-rule="nonzero"/>
</g>
</svg>
