Scale SVG Path – Wie man ein SVG skaliert

Auf meiner Startseite habe ich eine SVG-Animation erstellt. Das Problem daran, dass sich ein svg, bestehend aus path, circle, rects usw. nicht so einfach skalieren und damit in der Responsive Ansicht darstellen lässt.

Nun hätte man die Möglichkeit gehabt für die einzelnen Ansichten ein eigenes SVG mit der entsprechenden Größe zu erstellen. Da ich aber ein fauler Mensch bin habe ich nach einer dynamischen Variante gesucht, die das svg skaliert.

So skalierst du dein svg mit path

Im folgenden findet Ihr ein .css Code, den Ihr eurem svg in der .css Datei hinzufügen solltet. Dadurch wird das svg, samt der path, rects etc., anhand der Browserweite, skaliert.

width: 100vw;
height: (height/width * 100)vw;
max-height: 100vh;
max-width: (width/height * 100)vh;

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.