SVG - Kurzanleitung

Was ist SVG?

SVG, Scalable Vector Graphics ist eine XML-basierte Sprache zum Definieren vektorbasierter Grafiken.
SVG soll Bilder über das Web anzeigen.
Als Vektorbilder verliert das SVG-Bild nie an Qualität, unabhängig davon, wie es verkleinert oder in der Größe geändert wird.
SVG-Bilder unterstützen Interaktivität und Animation.
SVG ist ein W3C-Standard.
Andere Bildformate wie Rasterbilder können auch mit SVG-Bildern kombiniert werden.
SVG lässt sich gut in XSLT und DOM von HTML integrieren.

Vorteile

Verwenden Sie einen beliebigen Texteditor, um SVG-Bilder zu erstellen und zu bearbeiten.
SVG-Bilder sind XML-basiert, durchsuchbar, indizierbar und können per Skript und komprimiert werden.
SVG-Bilder sind hoch skalierbar, da sie niemals an Qualität verlieren, unabhängig davon, wie sie verkleinert oder in der Größe geändert werden
Gute Druckqualität bei jeder Auflösung
SVG ist ein offener Standard

Nachteile

Die Größe des Textformats ist größer als bei binär formatierten Rasterbildern.
Die Größe kann auch für kleine Bilder groß sein.

Beispiel

Das folgende XML-Snippet kann verwendet werden, um einen Kreis im Webbrowser zu zeichnen.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

Betten Sie das SVG-XML direkt in eine HTML-Seite ein.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Ausgabe

Öffnen Sie textSVG.htm im Chrome-Webbrowser. Sie können Chrome / Firefox / Opera verwenden, um SVG-Bilder direkt ohne Plugin anzuzeigen. In Internet Explorer sind ActiveX-Steuerelemente erforderlich, um SVG-Bilder anzuzeigen.

Wie SVG in HTML integriert wird

Das Element <svg> gibt den Start des SVG-Bildes an.
Die Breiten- und Höhenattribute des <svg> -Elements definieren die Höhe und Breite des SVG-Bildes.
Im obigen Beispiel haben wir ein <circle> -Element verwendet, um einen Kreis zu zeichnen.
Die Attribute cx und cy repräsentieren den Mittelpunkt des Kreises. Der Standardwert ist (0,0). Das Attribut r repräsentiert den Radius des Kreises.
Andere Attribute Strich und Strichbreite steuern die Kontur des Kreises.
Das Füllattribut definiert die Füllfarbe des Kreises.
Das Schließen des </ svg> -Tags zeigt das Ende des SVG-Bildes an.

SVG bietet eine Reihe von Formen, mit denen Bilder gezeichnet werden können. Es folgen die gängigen Formen.

Sr.Nr.	Formtyp & Beschreibung
1	rect Wird zum Zeichnen eines Rechtecks verwendet.
2	Kreis Wird zum Zeichnen eines Kreises verwendet.
3	Ellipse Wird zum Zeichnen einer Ellipse verwendet.
4	Linie Wird verwendet, um eine Linie zu zeichnen.
5	Polygon Wird verwendet, um eine geschlossene Form zu zeichnen, die aus verbundenen geraden Linien besteht.
6	Polylinie Wird verwendet, um eine offene Form zu zeichnen, die aus verbundenen geraden Linien besteht.
7	Pfad Wird verwendet, um einen beliebigen Pfad zu zeichnen.

Das Element <text> wird zum Zeichnen von Text verwendet.

Erklärung

Es folgt die Syntaxdeklaration von <text>Element. Wir haben nur Hauptattribute gezeigt.

<text
  x="x-cordinates"
  y="y-cordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

Attribute

Sr.Nr.	Attribut & Beschreibung
1	x - x-Achsenkoordinaten von Glyphen.
2	y - y-Achsenkoordinaten von Glyphen.
3	dx - Verschiebung entlang der x-Achse.
4	dy - Verschiebung entlang der y-Achse.
5	rotate - Rotation auf alle Glyphen.
6	textlength - Renderlänge des Textes.
7	lengthAdjust - Art der Anpassung mit der gerenderten Länge des Textes.

Beispiel

testSVG.htm

<html>
   <title>SVG Text</title>
   <body>
      
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

Ausgabe

Öffnen Sie textSVG.htm im Chrome-Webbrowser. Sie können Chrome / Firefox / Opera verwenden, um SVG-Bilder direkt ohne Plugin anzuzeigen. Internet Explorer 9 und höher unterstützt auch das Rendern von SVG-Bildern.

Text mit drehen

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
            <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
            <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

Ausgabe

Mehrzeiliger Text

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="570" height="100">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
               <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
               <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
   </body>
</html>

Ausgabe

Hyperlink-Text

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="10" >Text as Link: </text>
         
            <a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30" 
               fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

Ausgabe

SVG unterstützt mehrere Stricheigenschaften.

Im Folgenden sind die wichtigsten Stricheigenschaften aufgeführt.

Sr.Nr.	Strichart & Beschreibung
1	stroke - Definiert die Farbe von Text, Linie oder Umriss eines Elements.
2	stroke-width - Definiert die Dicke von Text, Linie oder Umriss eines Elements.
3	stroke-linecap - definiert verschiedene Arten der Endung einer Linie oder eines Umrisses eines Pfades.
4	stroke-dasharray - wird verwendet, um gestrichelte Linien zu erstellen.

Beispiel

testSVG.htm

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="red" d="M 50 50 L 300 50" />
            <path stroke="green" d="M 50 70 L 300 70" />
            <path stroke="blue" d="M 50 90 L 300 90" />
         </g> 
      </svg>
   
   </body>
</html>

Ausgabe

Strichbreite

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
         <path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
         <path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
      </svg>
      
   </body>
</html>

Ausgabe

Strichkappe

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="butt" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Ausgabe

Schlaganfall-Dasharray

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5,5" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10,10" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6" 
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Ausgabe

SVG verwendet das Element <filter>, um Filter zu definieren. Das <filter> -Element verwendet ein id-Attribut, um es eindeutig zu identifizieren. Filter werden in <def> -Elementen definiert und dann von Grafikelementen anhand ihrer IDs referenziert.

SVG bietet eine Vielzahl von Filtern. Im Folgenden finden Sie eine Liste der häufig verwendeten Filter.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - Filter für Schlagschatten
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Erklärung

Es folgt die Syntaxdeklaration von <filter>Element. Wir haben nur Hauptattribute gezeigt.

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

Attribute

Sr.Nr.	Name & Beschreibung
1	filterUnits- Einheiten zum Definieren des Filtereffektbereichs. Es gibt das Koordinatensystem für die verschiedenen Längenwerte innerhalb des Filters und für die Attribute an, die den Filterunterbereich definieren. Wenn filterUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Elements 'filter' vorhanden sind. Wenn filterUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des 'filter'-Elements vorhanden waren. Standard ist userSpaceOnUse.
2	primitiveUnits- Einheiten zum Definieren des Filtereffektbereichs. Es gibt das Koordinatensystem für die verschiedenen Längenwerte innerhalb des Filters und für die Attribute an, die den Filterunterbereich definieren. Wenn filterUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Elements 'filter' vorhanden sind. Wenn filterUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des 'filter'-Elements vorhanden waren. Standard ist userSpaceOnUse.
3	x- x-Achsen-Koordinate des Filterbegrenzungsrahmens. Defeault ist 0.
4	y- y-Achsenkoordinate des Filterbegrenzungsrahmens. Standard ist 0.
5	width- Breite des Filterbegrenzungsrahmens. Standard ist 0.
6	height- Höhe des Filterbegrenzungskastens. Standard ist 0.
7	filterRes - Zahlen, die Filterbereiche darstellen.
8	xlink:href - wird verwendet, um auf einen anderen Filter zu verweisen.

Beispiel

testSVG.htm

<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

Zwei <filter> -Elemente, definiert als filter1 und filter2.
Der feGaussianBlur-Filtereffekt definiert den Unschärfeeffekt mit der Unschärfemenge unter Verwendung von stdDeviation.
in = "SourceGraphic" definiert, dass der Effekt für das gesamte Element gilt.
Der feOffset-Filtereffekt wird verwendet, um einen Schatteneffekt zu erzeugen. in = "SourceAlpha" definiert, dass der Effekt für den Alpha-Teil von RGBA-Grafiken gilt.
<rect> -Elemente verknüpften die Filter mithilfe des Filterattributs.

Ausgabe

Filter mit Schatteneffekt

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

Ausgabe

SVG verwendet das <pattern> -Element, um Muster zu definieren. Muster werden mit dem <pattern> -Element definiert und zum Kacheln von Grafikelementen verwendet.

Erklärung

Es folgt die Syntaxdeklaration von <pattern>Element. Wir haben nur Hauptattribute gezeigt.

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

Attribute

Sr.Nr.	Name & Beschreibung
1	patternUnits- Einheiten zum Definieren des Mustereffektbereichs. Es gibt das Koordinatensystem für die verschiedenen Längenwerte innerhalb des Musters und für die Attribute an, die den Musterunterbereich definieren. Wenn patternUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Elements 'pattern' vorhanden sind. Wenn patternUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des Elements 'pattern' vorhanden sind. Standard ist userSpaceOnUse.
2	patternContentUnits- Einheiten zum Definieren des Musterinhaltsbereichs. Es gibt das Koordinatensystem für die verschiedenen Längenwerte innerhalb des Musters und für die Attribute an, die den Musterunterbereich definieren. Wenn patternContentUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Elements 'pattern' vorhanden sind. Wenn patternContentUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des Elements 'pattern' vorhanden sind. Standard ist userSpaceOnUse.
3	x- x-Achsen-Koordinate des Musterbegrenzungsrahmens. Defeault ist 0.
4	y- y-Achsenkoordinate des Musterbegrenzungsrahmens. Standard ist 0.
5	width- Breite des Musterbegrenzungsrahmens. Standard ist 0.
6	height- Höhe des Musterbegrenzungsrahmens. Standard ist 0.
7	preserveAspectRatio - um das Verhältnis von Breite zu Höhe des Originalinhalts beizubehalten.
8	xlink:href - wird verwendet, um auf ein anderes Muster zu verweisen.

Beispiel

testSVG.htm

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>
      
      <svg width="800" height="800">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

Ein <Muster> -Element, das als Muster1 definiert ist.
Im Muster wird ein Ansichtsfeld definiert und ein Pfad definiert, der als Muster verwendet werden soll.
Im Rect-Element wird im Fill-Attribut die URL des Musters angegeben, um das Rechteck mit dem zuvor erstellten Muster zu füllen.

Ausgabe

Farbverlauf bezieht sich auf einen reibungslosen Übergang einer Farbe zu einer anderen Farbe innerhalb einer Form. SVG bietet zwei Arten von Verläufen.

Linear Gradients - Repräsentiert den linearen Übergang einer Farbe zu einer anderen von einer Richtung in eine andere.
Radial Gradients - Repräsentiert den kreisförmigen Übergang einer Farbe zu einer anderen von einer Richtung in eine andere.

Lineare Farbverläufe

Erklärung

Es folgt die Syntaxdeklaration von <linearGradient>Element. Wir haben nur Hauptattribute gezeigt.

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

Attribute

Sr.Nr.	Name & Beschreibung
1	gradientUnits- Einheiten zur Definition des Koordinatensystems für die verschiedenen Längenwerte innerhalb des Verlaufs. Wenn gradientUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Verlaufselements vorhanden sind. Wenn patternContentUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des Verlaufselements vorhanden sind. Standard ist userSpaceOnUse.
2	x1- x-Achsen-Koordinate des Gradientenvektors. Defeault ist 0.
3	y1- y-Achsenkoordinate des Gradientenvektors. Standard ist 0.
4	x2- x-Achsen-Koordinate des Gradientenvektors. Defeault ist 0.
5	y2- y-Achsenkoordinate des Gradientenvektors. Standard ist 0.
6	spreadMethod- Gibt die Methode zum Verteilen des Verlaufs innerhalb des Grafikelements an. Die Standardeinstellung ist "Pad".
7	xlink:href - wird verwendet, um auf einen anderen Gradienten zu verweisen.

Beispiel

testSVG.htm

<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

Ein <linearGradient> -Element, das als sampleGradient definiert ist.
In linearGradient werden zwei Offsets mit zwei Farben definiert.
Im Rect-Element wird im Fill-Attribut die URL des Verlaufs angegeben, um das Rechteck mit dem zuvor erstellten Verlauf zu füllen.

Ausgabe

Radiale Farbverläufe

Erklärung

Es folgt die Syntaxdeklaration von <radialGradient>Element. Wir haben nur Hauptattribute gezeigt.

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

Attribute

Sr.Nr.	Name & Beschreibung
1	gradientUnits- Einheiten zur Definition des Koordinatensystems für die verschiedenen Längenwerte innerhalb des Verlaufs. Wenn gradientUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Verlaufselements vorhanden sind. Wenn patternContentUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des Verlaufselements vorhanden sind. Standard ist userSpaceOnUse.
2	cx- x-Achsen-Koordinate des Mittelpunkts des größten Kreises des Gradientenvektors. Defeault ist 0.
3	cy- y-Achsenkoordinate des Mittelpunkts des größten Kreises des Gradientenvektors. Standard ist 0.
4	r- Radius des Mittelpunkts des größten Kreises des Gradientenvektors. Defeault ist 0.
5	fx- Brennpunkt des radialen Gradienten. Standard ist 0.
6	fy- Brennpunkt des radialen Gradienten. Standard ist 0.
7	spreadMethod- Gibt die Methode zum Verteilen des Verlaufs innerhalb des Grafikelements an. Die Standardeinstellung ist "Pad".
8	xlink:href - wird verwendet, um auf einen anderen Gradienten zu verweisen.

Beispiel

testSVG.htm

<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

Ein <radialGradient> -Element, das als sampleGradient definiert ist.
In radialGradient werden zwei Offsets mit zwei Farben definiert.
Im Rect-Element wird im Fill-Attribut die URL des Verlaufs angegeben, um das Rechteck mit dem zuvor erstellten Verlauf zu füllen.

Ausgabe

SVG-Bilder können auf Benutzeraktionen reagieren. SVG unterstützt Zeigerereignisse, Tastaturereignisse und Dokumentereignisse. Betrachten Sie das folgende Beispiel.

Beispiel

testSVG.htm

<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

Erklärung

SVG unterstützt JavaScript / ECMAScript-Funktionen. Der Skriptblock soll im CDATA-Block sein und die Unterstützung von Zeichendaten in XML berücksichtigen.
SVG-Elemente unterstützen Mausereignisse und Tastaturereignisse. Wir haben das onClick-Ereignis verwendet, um Javascript-Funktionen aufzurufen.
In Javascript-Funktionen stellt document ein SVG-Dokument dar und kann zum Abrufen der SVG-Elemente verwendet werden.
In Javascript-Funktionen stellt das Ereignis das aktuelle Ereignis dar und kann verwendet werden, um das Zielelement abzurufen, für das das Ereignis ausgelöst wurde.

Ausgabe

Das Element <a> wird zum Erstellen eines Hyperlinks verwendet. Das Attribut "xlink: href" wird verwendet, um die IRI (Internationalized Resource Identifiers) zu übergeben, die zu URI (Uniform Resource Identifiers) komplementär ist.

Erklärung

Es folgt die Syntaxdeklaration von <a>Element. Wir haben nur Hauptattribute gezeigt.

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

Attribute

Sr.Nr.	Name & Beschreibung
1	xlink:show- zu Dokumentationszwecken für XLink-fähige Prozessoren. Standard ist neu.
2	xlink:actuate - zu Dokumentationszwecken für XLink-fähige Prozessoren.
3	xlink:href - Position des referenzierten Objekts.
4	target - Wird verwendet, wenn Ziele für die Endressource möglich sind.

Beispiel

testSVG.htm

<html>
   <title>SVG Linking</title>
   <body>
   
      <h1>Sample Link</h1>
      
      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.tutorialspoint.com"> 
               <text x="0" y="15" fill="black" >
               Click me to load TutorialsPoint DOT COM.</text>
            </a>
         </g> 
         
         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load TutorialsPoint DOT COM</text>
            
            <a xlink:href="http://www.tutorialspoint.com"> 
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> 
            </a>
         </g>
      </svg>
   
   </body>
</html>

Ausgabe