All SVG Samples
Ellipses built using <path>s, generated by script.
Now works in ASV as well.
File(s):
arcs1.svg
[Open |
View as text]
|
chem1.xml zoomed in by a factor of eight.
File(s):
chem2.xml
[Open |
View as text]
|
This sample uses the CSS dynamic pseudo-class :hover to change the fill-opacity of three overlapping circles when the cursor is moved over them.
File(s):
circles1.svg
[Open |
View as text]
|
Essentially the same as circles1.xml, but with a background image (using <foreignObject>).
File(s):
circles2.xml
[Open |
View as text]
|
Simple script-based animation of a triangle by direct manipulation of SVG DOM properties (as opposed to attributes).
This example is a compound document (rather than a pure SVG document). HTML is used to implement a button and the <script> tag.
File(s):
dom1.xml
[Open |
View as text]
|
Illustrates script-based interaction with the
SVGTransformList and
SVGTransform SVG DOM interfaces.
Note that the SVGTransformList::Consolidate() function is not yet implemented, hence clicking the Consolidate
button will have no effect.
This example is a compound document (rather than a pure SVG document). HTML is used to implement user interface buttons and the <script> tag.
File(s):
dom2.xml
[Open |
View as text]
|
Demonstrates simple mousedown event handlers on svg elements.
File(s):
events1.xml
[Open |
View as text]
|
Drag an SVG circle around on the screen.
File(s):
events2.xml
[Open |
View as text]
|
HTML and XUL mixed with SVG using <foreignObject>.
File(s):
foreign1.xml
[Open |
View as text]
|
Simple example of a rectangle filled with a linear white to black gradient.
File(s):
gradients1.svg
[Open |
View as text]
|
Simple example of a rectangle filled with a radial white to black gradient.
File(s):
gradients2.svg
[Open |
View as text]
|
Examples of <line> elements with different stroke-linecap styles and stroke-widths.
File(s):
line1.xml
[Open |
View as text]
|
Illustration of the different stroking styles for lines. Sample by Andrea Salmasso.
File(s):
linestroke.xml
[Open |
View as text]
|
Dynamically constructed polygons with script animation and CSS-determined opacity (:hover).
File(s):
opacity1.xml
[Open |
View as text]
|
Two overlapping polygons with dynamic CSS-determined opacity and stroke.
File(s):
opacity2.svg
[Open |
View as text]
|
Examples of s with l, L, h, H, v and V commands.
File(s):
paths1.xml
[Open |
View as text]
|
Examples of s with c, C, s and S commands.
File(s):
paths2.xml
[Open |
View as text]
|
Examples of s with elliptical arc segments (a, A commands). Adapted from a W3 sample.
File(s):
paths3.svg
[Open |
View as text]
|
- Simple stroked and filled regular polygons.
- Slightly modified version of a sample from the W3 SVG specs.
File(s):
polygons1.svg
[Open |
View as text]
|
Illustrates polygons, transforms, dynamic CSS style (:hover) and mixing of html/svg in a compound document.
If they are mouseovered their transparency changes.
This example is a compound document with an internal CSS style sheet wrapped in a <html:style> element.
The compound document follows the structure of a html document (with outer <html> element, <head> and <body> sections) but that is not necessary in general.
File(s):
polygons2.xml
[Open |
View as text]
|
Illustrates polygons, simple nested transforms, dynamic CSS style (:hover),
attribute-selectors and mixing of html/svg in a compound document.
Two of the shapes have an attribute selectable="1". If they are mouseovered their transparency changes.
This example is a compound document with an internal CSS style sheet wrapped in a <html:style> element.
The compound document follows the structure of a html document (with outer <html> element, <head> and <body> sections) but that is not necessary in general.
File(s):
polygons3.xml
[Open |
View as text]
|
Examples of the quadratic bezier path commands. (Modified w3c sample by Daniele Nicolodi.)
File(s):
quadbezier1.svg
[Open |
View as text]
|
Illustrates simple script-based manipulation of attributes.
This example is a compound document (rather than a pure SVG document). HTML is used to implement user interface buttons and the <script> tag.
File(s):
style1.xml
[Open |
View as text]
|
Yes, that game. In SVG. You know you want it :-)
Not quite finished yet, but playable.
Also works in ASV.
Now with score keeping and accelerating clock, courtesy of Tuna-Fish.
File(s):
svgtetris.svg
[Open |
View as text]
|
Moveable/Resizeable XBL/SVG triangles and cubic splines.
This sample now calls forceRedraw() for each mousemove to enhance responsiveness for
recent builds that include the async painting patch of bug 261974. In older (< 4. October 2004) builds,
performance on Linux will be sluggish.
File(s):
xbl-shapes.xml
[Open |
View as text]
xbl-shape-bindings.css
[Open |
View as text]
xbl-shape-bindings.xml
[Open |
View as text]
|
This sample shows how XUL templates can be used to create SVG content from
RDF datasources.
Note:
Until recently (Feb '04) SVG didn't work in conjunction with XUL
templates, because SVG didn't allow attributes to assume arbitrary
values. XUL templates, however, require that <action>s contain
elements such as <svg:polygon points="?points"/>, where "?points" is
actually disallowed as a value for the SVG points attribute (it
requires a list of points). Previously, the points attribute as
given above would just have been ignored and the default value ("")
retained.
SVG behaviour has now been changed so that attributes can assume
arbitrary values (either from source or via script with
setAttribute).
This leads to some subtle issues with the SVG DOM which
maps some members onto attributes:
- If a syntactically incorrect value is supplied for an attribute,
subsequent invocations of
getAttribute() will return that value, but
it won't (can't) be mapped onto the corresponding DOM member, which
will retain its previous value. Example: Setting circle.setAttribute("r", "foo") will not affect
circle.r.baseVal.value or circle.r.baseVal.valueAsString, but circle.getAttribute("r") will now return "foo".
- If a value is changed via the SVG DOM, the value gets mapped back onto the attribute regardless of
the value of the attribute. Continuing the above example: After setting
circle.r.baseVal.value=1, invocations
of circle.getAttribute("r") will now return 1.
- The SVG DOM can't be used to set an attribute to an invalid value. Example:
circle.r.baseVal.valueAsString="foo"
will neither set the value of circle.r nor the corresponding attribute "r".
File(s):
xulsvg1.xul
[Open |
View as text]
xulsvg1.rdf
[Open |
View as text]
|
|
