1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
---
title: Tools for SVG
slug: Web/SVG/Tutorial/Tools_for_SVG
translation_of: Web/SVG/Tutorial/Tools_for_SVG
---
<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
<p>Nachdem nun die Grundlagen von SVG bekannt sind, soll ein Blick auf einige Tools geworfen werden, um mit SVG-Dateien zu arbeiten.</p>
<h3 id="Browser_support">Browser support</h3>
<p>Ab Internet Explorer 9 unterstützen alle großen Browser SVG: IE 9, Mozilla Firefox, Safari, Google Chrome und Opera. Mobile Geräte mit auf Webkit basierenden Browsern unterstützen auch SVG. Auf älteren oder kleineren Geräten besteht die Möglichkeit, dass SVG Tiny unterstützt wird.</p>
<h2 id="Inkscape">Inkscape</h2>
<p>URL: <a class="external" href="http://www.inkscape.org">www.inkscape.org</a></p>
<p>One of the most important tools for a graphics format is a decent drawing program. Inkscape offers state-of-the-art vector drawing, and it's open source.</p>
<p>Moreover, it uses SVG as its native file format. To store Inkscape specific data, it extends the SVG file with elements and attributes in a custom namespace, but you can also choose to export as plain SVG.</p>
<h2 id="Adobe_Illustrator">Adobe Illustrator</h2>
<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p>
<p>Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.</p>
<h2 id="Apache_Batik">Apache Batik</h2>
<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p>
<p>Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.</p>
<p>Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.</p>
<p>Together with <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a> Batik can transform SVG to PDF.</p>
<h3 id="Other_renderers">Other renderers</h3>
<p>Several projects exist that can create a raster image from an SVG source. <a class="external" href="http://ImageMagick.org">ImageMagick</a> is one of the most famous command-line image processing tools. The Gnome library <a class="external" href="http://library.gnome.org/devel/rsvg/">rsvg</a> is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.</p>
<h2 id="Raphael_JS">Raphael JS</h2>
<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p>
<p>This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.</p>
<h2 id="Snap.svg">Snap.svg</h2>
<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p>
<p>A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.</p>
<h2 id="Google_Docs">Google Docs</h2>
<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p>
<p>Zeichnungen können als SVG aus Google Docs exportiert werden.</p>
<h2 id="Wissenschaft">Wissenschaft</h2>
<p>Beide gut bekannten Plotting-Werkzeug xfig und gnuplot unterstützen den Export als SVG. Um Graphen online-Hilfe zu rendern, nutze man <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a>, es unterstützt VML, SVG und canvas und entscheidet anhand des Browsers automatisch, welche Technologie dabei genutzt wird.</p>
<p>In GIS-Anwendungen (Geographic Information System) wird SVG oft benutzt, um Daten sowohl zu speichern als auch fürs spätere Rendern. Für Näheres siehe <a class="external" href="http://carto.net">carto.net</a>.</p>
<h2 id="Weitere_Tools!">Weitere Tools!</h2>
<p>Beim W3C findet sich eine <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">Liste von Programmen</a>, die SVG unterstützen.</p>
<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
|
