16 Mar

SVG examples

+ marker, some sizes reduced
← Older revision
Revision as of 21:45, 16 March 2013
Line 1:
Line 1:

'''Examples of SVG''' ([[w:Scalable Vector Graphics|Scalable Vector Graphics]])

'''Examples of SVG''' ([[w:Scalable Vector Graphics|Scalable Vector Graphics]])

−
==Example #1 - Green rectangle==
+
== Basic shape examples ==
−
[[Image:Svg example1.svg|border]]
+
=== Green rectangle ===

+
[[Image:Svg example1.svg|150px|border]]

Line 13:
Line 13:

−
==Example #2 - Blue rounded rectangle==
+
=== Blue rounded rectangle ===
−
[[Image:Svg example2.svg|border]]
+
[[Image:Svg example2.svg|150px|border]]

Line 26:
Line 26:

−
==Example #3 - Red and blue squares==
+
=== Red and blue squares ===
−
[[Image:Svg example3.svg|border]]
+
[[Image:Svg example3.svg|150px|border]]

Line 43:
Line 43:

−
==Example #4 - Red circle==
+
=== Red circle ===
−
[[Image:Svg example4.svg|border]]
+
[[Image:Svg example4.svg|150px|border]]

Line 56:
Line 56:

−
==Example #5 - Ellipse==
+
=== Ellipse ===
−
[[Image:Svg example5.svg|border]]
+
[[Image:Svg example5.svg|150px|border]]

Line 68:
Line 68:

−
==Example #6 - multiple grayscales ==
+
=== Multiple grayscales ===
−

+
[[Image:Svg example6.svg|150px|border]]
−
[[Image:Svg example6.svg|550px|border]]

Line 97:
Line 97:

−
== Example #7 - Pentagram ==
+
=== Pentagram ===
−

+
[[File:SVG example7.svg|150px|border]]
−
[[File:SVG example7.svg|border]]

Line 109:
Line 109:

See also: ''[[Das Pentagramm als manuelle SVG-Grafik (de)]] Eine Anleitung''

See also: ''[[Das Pentagramm als manuelle SVG-Grafik (de)]] Eine Anleitung''

−
== Example #8 - animated SVG ==
+
== Animated SVG ==

This preview isn't animated. To see the original SVG, look [http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg here].

This preview isn't animated. To see the original SVG, look [http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg here].

To see the animations, you need an SVG animation capable browser or viewer.

To see the animations, you need an SVG animation capable browser or viewer.
−
[[File:Trajans-Column-lower-animated.svg|500px|border]]
+
[[File:Trajans-Column-lower-animated.svg|400px|border]]

+
== Marker ==

+
The presentation of markers is in different viewers implemented differently. The position of origins is not identically. Inkscape shows the boundaries incorrect.

+

+

+
Svg example marker.svg | Wiki commons

+
Svg example marker Opera.png | Opera

+
Svg example marker Inkscape.png | Inkscape

+

+

+
Code of 3) use the translate attribute.

+

+

+

+
markerUnits="userSpaceOnUse" markerWidth="40" markerHeight="40">

+

+

+

+

== See also ==

== See also ==

http://commons.wikimedia.org/w/index.php?title=SVG_examples&diff=92708349&oldid=90839719