Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » Besser platzieren und transformieren dank verschachtelter SVGs

Besser platzieren und transformieren dank verschachtelter SVGs

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 8. Juni 2017

Inhaltsverzeichnis

Das Erstellen von SVG-Grafiken ist eine recht unkomplizierte Sache. Wer HTML beherrscht, findet sich auch schnell in der SVG-Syntax zurecht. Allerdings gibt es einige kleine, aber durchaus relevante Unterschiede zwischen HTML und SVG, was die Positionierung von SVG-Formen betrifft. Denn diese werden grundsätzlich absolut innerhalb einer SVG-Zeichenfläche platziert.

So werden Formen in SVG-Grafiken platziert

Was die Positionierung von SVG-Elementen wie „<rect>“ oder „<circle>“ betrifft, gibt es schon bezüglich der Syntax einen großen Unterschied zu HTML. Denn während HTML-Elemente per CSS-Eigenschaften „left“ und „top“ platziert werden, lassen sich SVG-Elemente nur per „x“- und „y“-Attribute (bei Kreisen sind es die „cx“- und „cy“-Attribute) platzieren.

Während Farben und Konturen wie bei HTML per CSS gestaltet werden können, ist eine Positionierung per CSS im SVG-Format gar nicht möglich.

Der zweite Unterschied ist der, dass SVG-Formen grundsätzlich absolut innerhalb eines „<svg>“-Elementes platziert werden. Auch wenn es mit dem „<g>“-Element eine Möglichkeit gibt, Elemente zu gruppieren, so lässt sich dem „<g>“-Element selbst keine Position zuweisen.

Gerade bei komplexen Grafiken stellt dies schon mal ein Problem dar. Denn will man die Position einer Figur ändern, die möglicherweise aus dutzenden Einzelementen besteht, müssen die „x“- und „y“-Attribute sowie die anderen positionsbestimmenden Attribute wie „cx“, „cy“ und „d“ beim „<path>“-Element verändert werden.

Bei statischen Grafiken ist das Problem noch relativ einfach lösbar, indem man die Grafik in einem Zeichenprogramm wie Illustrator öffnet. Dort kannst du dann alles anpassen und wieder als SVG-Datei speichern.

Bei dynamischen Veränderungen, die zum Beispiel per JavaScript oder PHP berechnet werden, muss jedes einzelne neu zu platzierende Element einer Figur verändert werden. Und gerade beim „<path>“-Element mit seinem komplexen „d“-Attribut ist das durchaus eine Herausforderung.

SVGs verschachteln und doch relativ platzieren

Es gibt aber einen Weg, wie man SVG-Formen doch relativ innerhalb einer SVG-Grafik platzieren kann. So erlaubt das SVG-Format nämlich das Verschachteln von SVG-Grafiken.

Innerhalb eines „<svg>“-Elementes darf nämlich ein weiteres „<svg>“-Element liegen. Zwar können die verschachtelten „<svg>“-Elemente selbst auch nur absolut platziert werden. Aber innerhalb einer Verschachtelung ist die absolute Platzierung auf das jeweilige Eltern-„<svg>“-Element begrenzt.

<svg width="750" height="500" style="background: gray">
  <svg x="200" y="200">
    <circle cx="50" cy="50" r="50" style="fill: red" />
  </svg>
  <circle cx="50" cy="50" r="50" style="fill: yellow" />
</svg>

Im Beispiel wird innerhalb und außerhalb einer verschachtelten SVG-Grafik ein Kreis gezeichnet. Die Kreise sind so platziert, dass sie jeweils an der linken oberen Ecke stehen. Da das verschachtelte „<svg>“-Element 200 Pixel vom linken und oberen Rand entfernt ist, wird der rote Kreis auch entsprechend 200 Pixel von beiden Rändern entfernt platziert.

svg verschachtelt1 Besser platzieren und transformieren dank verschachtelter SVGs

Änderst du die „x“- und „y“-Attribute des zweiten „<svg>“-Elementes, wird auch die Platzierung aller darin enthaltenden Formen verändert.

Anders als das „<g>“-Element zum Gruppieren hast du mit verschachtelten „<svg>“-Elementen also die Möglichkeit, die Position mehrerer Formen gleichzeitig zu verändern.

Elemente transformieren

Die CSS-Eigenschaft „transform“ skaliert und dreht nicht nur HTML-Elemente, sondern auch SVG-Formen. Allerdings wird „transform“ im SVG-Kontext anders interpretiert als bei HTML.

Vor allem beim Drehen, also der „rotate()“-Funktion, macht sich das bemerkbar. Denn von HTML kennt man es, dass „rotate()“ dafür sorgt, dass Elemente sich um den eigenen Mittelpunkt drehen.

Im SVG-Format werden Elemente jedoch immer um die linke, obere Ecke der SVG-Zeichenfläche gedreht. Das macht es natürlich schwierig, Drehungen zu realisieren. Will man beispielsweise einen Text hochkant stellen, reicht es nicht, diesen um 90 Grad zu drehen. Auch die „x“- und „y“-Attribute müssen angepasst werden.

Denn ein Element, welches 200 Pixel von links und oben platziert und um 90 Grad gegen den Uhrzeigersinn gedreht wird, verschwindet gegebenenfalls nach oben aus der Zeichenfläche.

Allerdings kannst du dir auch hier verschachtelte SVG-Elemente zur Hilfe nehmen. Zwar erreichst du es nicht, dass Elemente sich um den eigenen Mittelpunkt drehen. Aber wenn du die zu drehenden Elemente links oben des verschachtelten „<svg>“-Elementes platzierst, ist die Anpassung der Position relativ einfach.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100">
    <rect x="0" y="0" width="142" height="142" style="fill: yellow" />
    <rect x="50" y="-50" width="100" height="100" style="fill: black; transform: rotate(45deg)" />
  </svg>
</svg>

Im Beispiel werden innerhalb eines verschachtelten „<svg>“-Elementes zwei Rechtecke platziert. Während das erste ohne „transform“-Eigenschaft auskommt, wird das zweite Element dank dieser Eigenschaft und der „rotate()“-Funktion um 45 Grad gedreht.

svg verschachtelt2 Besser platzieren und transformieren dank verschachtelter SVGs

Damit das zweite Rechteck dennoch mit der linken und oberen Position des ersten Rechtecks beginnt, müssen die „x“- und „y“-Attribute geändert werden. Ohne die Anpassung würde das zweite Rechteck um die linke obere Ecke des verschachtelten „<svg>“-Elementes nach links gedreht und zur Hälfte aus der Zeichenfläche herausragen.

Erschwerend kommt hinzu, dass die Positionierung abhängig ist von der Rotation. Denn das Koordinatensystem der gedrehten Form wird ebenfalls gedreht. Der Wert für „x“ basiert also nicht mehr auf der Horizontalen, sondern auf einer um 45 Grad gedrehten Achse.

Weiterer Vorteil verschachtelter SVGs

Es gibt noch einen weiteren Vorteil – oder zumindest etwas, was man beachten sollte. Über ein „<svg>“-Element lassen sich per CSS auch Farbe und Kontur zuweisen. Ist den Formen innerhalb dieser Zeichenfläche selbst keine Farbe oder Kontur zugewiesen, übernehmen sie alle das Aussehen des SVG-Elternelementes.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100" style="fill: yellow; stroke: red">
    <rect x="0" y="0" width="142" height="142" />
    <rect x="100" y="-50" width="100" height="100" style="transform: rotate(45deg)" />
 </svg>
</svg>

So ist es also auch unkompliziert möglich, allen Elementen eines SVG-Zeichenfläche ein einheitliches Aussehen zu verpassen.

svg verschachtelt3 Besser platzieren und transformieren dank verschachtelter SVGs

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

SEO7 Logo der Seo-Agentur in Esslingen und Stuttgart.

SEOSEVEN SEO & Webagentur

Esslingen

Logo der Allgäuer Webdesign-Agentur von Thomas Soyter Der informationsdesigner.

Der Informations­designer

Kaufbeuren

Chris Hortsch Webdesign Agentur Berlin Logo.

Chris Hortsch Webdesign

Berlin

Logo der Agentur Tawec Digital Services in Schorndorf.

TAWEC Digital Services

Schorndorf

Netkin Digital Marketing.

netkin digital Marketing

Köln

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑