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;

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu Scale SVG Path – Wie man ein SVG skaliert

Wenn dir der Beitrag Scale SVG Path – Wie man ein SVG skaliert gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.