Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Design » Besser platzieren und transformieren dank verschachtelter SVGs

Besser platzieren und transformieren dank verschachtelter SVGs

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 8. Juni 2017
Bookmarke mich
Share on pocket

Werbeagentur Hannover | 360 Grad Konzept

Niels Neumann Online Marketing

Wee Media | Webdesign Agentur

Trend Maker Marketing - Webdesign Agentur Regensburg

DAZECON - Webdesign und Marketing Leipzig

Orange Services

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.

Ä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.

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

KnallBlauMedia

Hamburg

Webagentur klickbeben

Innsbruck

BIZ Digital Marketing

Nürtingen

SEO-Sicht

Berlin

pictibe – Werbeagentur & Marketingagentur

Köln

Alle Agenturpartner

Jobs

Junior SEO Manager in München

München

Assistent/in der Geschäfts­führung

Innsbruck

System Engineer – Managed Service

Karlsruhe

SEO Junior für Suchmaschinen­optimierung

Salzburg

Projektmanager/ Projektleiter in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.