Was sind SVG-Grafiken ?
SVG steht für Scalable Vector Graphics. SVG wird verwendet zum erstellen von Grafiken fürs Web. Im Gegensatz zu Rastergrafiken werden Vektorgrafiken nicht als einzelne Pixel sondern als Bildbeschreibung gespeichert. Dadurch lassen sie sich wunderbar vergrößern und verkleinern. Das HTML <svg> Element wird verwendet für SVG-Grafiken. Das HTML <svg> Element ist ein Container für Grafiken. Mit SVG können Rechtecke, Kreise, Texte und Grafik-Bilder hinzugefügt werden.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page</title> |
| </head> |
| <body> |
| <svg style="display:block;margin:0 auto" height="130" width="250"> |
| <defs> |
| <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> |
| <stop offset="0%" |
| style="stop-color:rgb(30,144,255);stop-opacity:1" /> |
| <stop offset="100%" |
| style="stop-color:rgb(190,190,190);stop-opacity:1" /> |
| </linearGradient> |
| </defs> |
| <ellipse cx="125" cy="70" rx="85" ry="55" fill="url(#grad1)" /> |
| <text fill="black" font-size="45" font-family="Verdana" x="76" y="86">SVG</text> |
| </svg> |
| </body> |
| </html> |
