Gallery

Rope-3D.svg

Clippaths and filters, cloning using defs

This is an example that is supplied with Incscape.

This is an SVG that processes the same path element in different stages to arrive at a 3d-image of a rope. It demonstrates the use of transformations, clippaths and filters.

gallery_rope
gallardo.svg

Clippath element

Another example supplied with Incscape.

A clippath is used in the wheels of the gallardo2.svg for example.

 gallery_gallardo
The clippath is implemented as a alpha mask. First the target image is scaled to absolute scale and then rendered to a bitmap buffer, then the elements that make out the clippath are scaled to absolute scale and rendered in a masking color to a second bitmap buffer. Then the second buffer is applied to the first an then drawn on the rendering context.  gallery_gallardo2_wheel
car.svg

Gaussian filers

Another example supplied with Incscape.

In this complex svg a lot of gaussian filters are used. The gaussian filter is the only filter that is implemented in the version 2 of SVG control.

This svg uses 70 filters. Using filters is very expensive in terms of performance, therefore, in the default rendering options the sroFilter option is disabled.

 gallery_car
coords-viewattr-02-b.svg

Raster images, preserveAspectRatio

This is an svg from the SVG 1.1 2nd Edition Test Suite.

It demonstrates the use of the image element with embedded (base64) jpeg images and the preserveAspectRatio property.

Version 2 of SVG control supports base64 embedded raster images, external jpg and png images and external svg images.

 gallery_image_base64
coords-viewattr-04-f.svg

Referenced svg images, preserveAspectRatio

Another svg from the Test Suite.

This svg demonstrates the image element that references an external svg document.

 gallery_image_svg
styling-css-04-f.svg

CSS styling

Another svg from the Test Suite.

This is a test of some complicated css-rules, that are explained here.

 gallery_css
text-align-04-b.svg

Text anchor attribute

Another svg from the Test Suite.

This demonstrates the text-anchor attribute, which is difficult to implement because the length of an “text-chunk” has to be calculated before it can be rendered.

 gallery_text_anchor_1
groklaw-tribute.svg

Another, less boring example of text-anchor.

 gallery_text_anchor_2
Composite_UML_class_diagram.svg

An example that uses css and text-anchor to produce an UML diagram.

 gallery_uml
coords-units-03-b.svg

Units conversion

Another svg from the Test Suite.

This demonstrates the calculation of a length dimension in several units.

The “ex” unit is a relative unit, it is relative to the lowercase x glyph of the current font. It is implemented in this version 2 of the SVG control simply as 0.5 the em, because of performance reasons.

 gallery_units
painting-marker-06-f.svg

Marker

Another svg from the Test Suite.

This svg demonstrates the use of markers.

 gallery_marker_1
painting-marker-02-f.svg

Marker style inheritance

Another svg from the Test Suite.

Another test of the markers, this test demonstrates that the markers inherit their style from the element that contains them, not the element that references them.

 gallery_marker_2