Zur Startseite - about-svg.de
  ViewBox
  Symbole
  Hyperlinks
  Rasterbilder
   
   
   
   
   

 

 

 

Symbole

 

Symbole sind im Definitionsabschnitt festgelegte Formen oder Pfade, die später beliebig oft wieder verwendet werden können. Ähnlich wie beim Gruppen-Tag wird das beschrieben Symbol innerhalb von <symbol> und </symbol> eingeschlossen und mit einer ID belegt. Ein weiterer Vorteil für die Benutzung von Symbolen ist, dass sie beim Hochladen der SVG-Datei nicht mitgerendert werden. Das <use>-Element referenziert verschiedene Objekte, wie Text, Bilder, Formen, Pfade und Symbole.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<symbol id="haus">

<g transform="scale(0.4,0.4) translate(0,-200)">
<polyline stroke="#fff" fill="#990000" stroke-width="3px"
points=" 70,400 150,350 180,370 180,350 200,350 200,380
235,400 235,470 70,470 70,400" />
</g>

</symbol>

<use xlink:href="#haus"/>
<use x="120" y="50" xlink:href="#haus"/>
<use x="10" y="85" xlink:href="#haus"/>
<use transform="rotate(-5,-120,35)" x="220" y="45" xlink:href="#haus"/>

 

  nach oben 

 
 
  Zum Leipzig-Entertainer (SVG)  
     
  Zum Campusplan (SVG)  
     
  Zum SVG-Tutorial (SVG)  
     
  Zum Wankelmotor (SVG)