![\"Animated](\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2019\/03\/interactive_SVG_demo_392px.png\")
<\/a><\/p>\nKLICK!<\/b> Zum Starten in einem neuen Fenster.<\/pre>\nWeitere Vorteile von einer SVG<\/h3>\n\n- SVG<\/b> ist eine Vektorgrafik und kann ohne Qualit\u00e4tsverlust skaliert und verlustfrei manipuliert werden,<\/li>\n
- SVG<\/b> hat eine hohe Drucksch\u00e4rfe, das Format ist daher auch f\u00fcr die Printausgabe geeignet,<\/li>\n
- SVG<\/b> ist das einzige im Web breit einsetzbare Vektorgrafik-Format,<\/li>\n
- SVG<\/b> kann Grafik-Texte erzeugen, die f\u00fcr Suchmaschinen indizierbar sind.<\/li>\n<\/ul>\n
Da SVG<\/b> ein XML-basiertes Dateiformat ist, sind Inhalte von SVG-Dateien f\u00fcr computerunterst\u00fctzte \u00dcbersetzung und andere Weiterverarbeitungen leicht zug\u00e4nglich. Sie k\u00f6nnen prinzipiell auch direkt mit einem Texteditor bearbeitet werden. Bequemer ist allerdings die Bearbeitung mit speziellen Programmen.<\/p>\nWas ist ein intelligentes SVG?<\/h3>\n\n- Nachdem sich in den letzten Jahren HTML5-f\u00e4hige Browser durchgesetzt haben, k\u00f6nnen Sie nun SVG<\/b> direkt in HTML-Code einbetten, der dann mit dem HTML5-Parser (also keinem speziellem XML-Parser) verarbeitet wird.
\nMit verschiedenen Elementen (img und object) oder \u00fcber CSS k\u00f6nnen SVG-Grafiken je nach Funktion eingebunden und formatiert werden.<\/li>\n- Alle Pr\u00e4sentationsattribute k\u00f6nnen mit CSS bequem in externen Stylesheets zentral festgelegt und auch wieder ge\u00e4ndert werden.<\/li>\n
- Es ist in SVG<\/b> m\u00f6glich, fremde Multimedia-Objekte und andere XML-Dialekte einzubinden und dann als Grafik-Objekte zu transformieren, zu animieren oder mit Filtern zu ver\u00e4ndern.<\/li>\n<\/ul>\n
Wie kann SVG in der mobilen Dokumentation eingesetzt werden?<\/h3>\n\n- Die Gr\u00f6\u00dfe des SVG-Dokuments ist die Gesamt-H\u00f6he und -Breite der Datei, in AI also die Zeichenfl\u00e4che, die Gr\u00f6\u00dfe der eigentlichen SVG-Grafik ist die H\u00f6he und Breite des sichtbaren Grafikobjektes,<\/li>\n
- durch die Verwendung von Elementen wie title und desc k\u00f6nnen Metadaten hinterlegt werden, die Screenreadern semantische Hinweise zu den Grafiken geben k\u00f6nnen und so die Zug\u00e4nglichkeit erh\u00f6hen,<\/li>\n
- statt eine Grafik als PNG in verschiedenen Aufl\u00f6sungen auszuliefern, bringt SVG optimale Grafik f\u00fcr jede Monitorgr\u00f6\u00dfe. SVG-Grafiken sind fast immer kleiner als die PNG-Bitmaps, die aus der Grafik erzeugt werden.<\/li>\n<\/ul>\n
Die modernen Browser k\u00f6nnen die H\u00f6he der Grafik aus dem Seitenverh\u00e4ltnis im viewBox-Attribut berechnen und die SVG-Grafik an den umfassenden Block anpassen.<\/p>\n
Was sind dann die Voraussetzungen?<\/h3>\n
Browserkompatibilit\u00e4t<\/b>
\nInternet Explorer versteht das Format erst ab Version 9, alle anderen hatten schon immer Unterst\u00fctzung f\u00fcr SVG.<\/p>\n
Einbindungsmethode<\/b>
\nIn Adobe Illustrator CC ab Version 17.1 steht eine SVG-Funktion namens “interaktiv” (responsive) zur Verf\u00fcgung. Wird der Haken aktiviert, entfernt Illustrator die H\u00f6hen- und Breitenangaben aus dem SVG-Code bzw. aus der exportierten Grafik. Dadurch passt sich die SVG-Grafik automatisch dem zur Verf\u00fcgung stehenden Platzbedarf an.<\/p>\n
Vorteil intelligenter SVG-Grafiken in der TechComm auf mobilen Ger\u00e4ten<\/i>– demn\u00e4chst mehr.<\/p>\n","protected":false},"excerpt":{"rendered":"
Scalable Vector Graphics (SVG, englisch f\u00fcr skalierbare Vektorgrafik) ist die vom W3C empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken. SVG basiert auf XML, praktisch alle relevanten Webbrowser k\u00f6nnen einen Gro\u00dfteil des Sprachumfangs darstellen.<\/p>\n","protected":false},"author":5,"featured_media":4850,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[13,20,23,12,517,468,1,29],"tags":[544,542,543,539,526,541,540,167],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.workflowblog.de\/wp-content\/uploads\/2019\/03\/92px-SVG_logo.svg_.png","jetpack_shortlink":"https:\/\/wp.me\/p3kBRH-1gb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/4847"}],"collection":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4847"}],"version-history":[{"count":18,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/4847\/revisions"}],"predecessor-version":[{"id":4871,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/4847\/revisions\/4871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/media\/4850"}],"wp:attachment":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Vektorgrafik](\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2019\/03\/was_ist_einSVG_392px.png\")
<\/p>\n![\"SVG](\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2019\/03\/Sprachebenen_Ai_392px.png\")
<\/p>\n