1 / 20

SVG-Grafiken

SVG-Grafiken. Eine kleine Einführung von Ulrich Korioth. Was ist SVG?. SVG (Scalable Vector Graphics) ist eine auf XML-basierte Auszeichnungssprache. Mit SVG können zweidimensionale, skalierbare Vektorgrafiken und Vektoranimationen mit Hilfe eines Texteditors erzeugt werden.

blaise
Download Presentation

SVG-Grafiken

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SVG-Grafiken Eine kleine Einführung vonUlrich Korioth

  2. Was ist SVG? • SVG (Scalable Vector Graphics) ist eine auf XML-basierte Auszeichnungssprache. • Mit SVG können zweidimensionale, skalierbare Vektorgrafiken undVektoranimationen mit Hilfe eines Texteditors erzeugt werden. • Es ermöglicht, Grafiken, Animationen und Text in XML, HTML, Cascading Style Sheets, JavaScript, XSL, XSL-FO zu integrieren. • SVG-Dateien sind kleiner als andere Grafikformate wie GIF, JPEG, Tiff und PNG. • SVG-Dateien sind so skalierbar, dass sie auf jedem Ausgabegerät ohne Verlust der Bildqualität angezeigt oder gedruckt werden können. • SVG-Dateien werden nicht binär, sondern als Textin Form von XML-Code gespeichert.

  3. Was ist SVG? Mit SVG kann erstmals ein offener Standard benutzt werden, um hoch−qualitative vektorbasierte und interaktive Graphiken innerhalb von Web−Applikationen zu verwenden. Vorher konnte man lediglich proprietäre Standards verwenden (z. B. Flash).

  4. Graphische Möglichkeiten • SVG kennt prinzipiell 3 Arten von Graphik−Objekten:- Vektor basierte Geometrie,- Rasterbilder und- Texte. • SVG−Viewer stellen die Graphik üblicherweise in hoher Qualität dar. • Jegliche Graphik, die mit Graphik−oder DTP−Software erzeugt wurde, kann auch mit Hilfe von SVG abgespeichert und angezeigt werden.

  5. Graphische Möglichkeiten SVG kennt folgende Basis−Geometrie−Typen:- Rechtecke- Kreise- Ellipsen- Linien- Polylinien- Polygone- Symbole Beispiel

  6. Texte mit SVG Laut der SVG−Textspezifikation werden sämtliche in der DTP−Welt gebräuchlichen Textformatierungsmöglichkeiten unterstützt, z.B.Schriftart ,Gewicht, Schriftschnitte, Schriftlage, Schriftgrösse, Sperren, usw. In der aktuellen SVG−Spezifikation(1.0) ist jedoch kein mehrzeiliger Textvorgesehen. Aufgrund der Entwicklerwünsche wird dieses Feature jedoch in die nächste Spezifikationsversion aufgenommen.

  7. Voraussetzungen • Plug-In zur Darstellung der Grafik im Browser. • Texteditor oderBearbeitungsprogramme wie z.B. • WebDraw • CorelDraw • Adobe Illustrator CS2, GoLive • X-Studio 6 • Konvertierungstool (Konvertieren von dwg zu svg) • Weitere Programme bei www.w3C.org

  8. Aufbau einer SVG-Grafik XML-Version <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN""http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg"> </svg> Doc-Type (DTD) SVG-Inhalt

  9. SVG in HTML einbetten <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body><object data="test.svg" width="500" height="500" type="image/svg+xml"> <embed src="test.svg" width="500" height="500" type="image/svg+xml" /> </object></body> </html>

  10. Zulässige Tags

  11. Die wichtigsten Tags

  12. Beispiel 1 (Rechteck) <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-styleable.dtd"> <svg xml:space="preserve" > <rect y="60" x="60" width="190" height="145" style="fill:yellow;stroke:black"/> </svg>

  13. Beispiel 2 (Text) <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-styleable.dtd"> <svg> <text x="140" y="-55" transform="rotate(45)" style="font-size:36pt;font-family:'Arial Black';fill:blue;stroke:black;stroke-width:1px">SVG - Einführung</text><text x="55" y="+60" style="font-size:16pt;font-family:'Arial Black';fill:yellow;stroke:black;stroke-width:1px">Regionalgruppe Bodenseeraum</text> </svg>

  14. SVG-Grafik publizieren • XSL, XSLT • HTML • Browser (PlugIn) • PDF (über XSL-FO) • Es wird das FOP-Tool (Formating Objects Processor) und die Java Plattform JRE der J2SE benötigt.

  15. Publizieren mit XSL-Fo .svg XSLT-Stylesheet XML-Datei .xml .xsl XSLT-Prozessor HTML .fo XSL-FO-Engine PS-Datei PDF-Datei

  16. Vorteile • SVG ist W3C Recomendation. • Zum Erstellen von einfachen SVG-Grafiken genügt ein Texteditor. • SVG-Dateien können Hyperlinks beinhalten. • Zoomen ohne Qualitätsverlust. • Schatten, Lichteffekte und Farbverläufe sind möglich. • Animationen sind möglich (liegen als Text vor). • Text in Grafiken liegt als Text vor (Übersetzung). • Einsparen von Speicherplatz. • Offen zu unterschiedlichen Plattformen und Anwendungen.

  17. Nachteile • Zu einfach. • Derzeit wird noch ein Plug-In für die Darstellung im Browser benötigt (Adobe, Corel, Batik 1.1).- bisher bietet nur Firefox in der Version Beta1.5 Unterstützung.- Opera kündigt in Version 8.0 SVG-Unterstützung an.- Microsoft kündigt weiter an.

  18. Zukünftige Entwicklung • SVG wird in kurzer Zeit zum W3C-Standard werden(SVG 1.1 verabschiedet) • Die 1.2 Spezifikation für SVG ist seit 15. Juli einsehbar, aber noch nicht verabschiedet. Diese Version bietet:Spaltensatz (FlowText), umfangreiche Filter-Erweiterungen, wahrscheinlich genau definierte Marker (Endpunkte einer Linie), problemlose Einbindung von Sound- und Video-Dateien. • Schnelle Ausbreitung über Internetanwendungen • Heute schon in vielen Ersatzteilkatloganwendungen integriert- CatalogCreator, LinkOne, Schema ST4….

  19. Programme die SVG unterstützen • Arbortext: Publisher • Adobe: Illustrator ab 9.0, Golive • CorelDRAW 10 • QuarkXPress 5 • WebDraw (Jasc) • Evolgrafix, X-Studio 6 • Weitere bei www.w3c.com

  20. Nützliche Links • www.adobe.com/svg • www.helma-spona.de • www.w3.org/graphics/svg • www.scale-a-vector.de • www.apache.org • http://www.s-v-g.net • http://www.carto.net/papers/svg/Ausführlicher Einstieg mit Beispielen: http://www.carto.net/papers/svg/articles/paper_ugra_zurich_2001.pdf • http://www.5vg.de/svg/ • http://www.svg-cafe.com/

More Related