main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:basic:fills

example for colors, fills and transparency

The example to the left is implemented interactively, to show colours and transparency. The black circle is draggable: simply click on it and drag it within the square.

  • With horizontal movements the colour is changing, more detailed: the red channel is changing, green and blue stay with value zero.
  • With vertical movements the transparency is changed between 1 (top) and 0 (bottom).

Transparency can also be used with raster images and strokes.

Gradients are also possible, two simple gradients are used in the example: from black to red (horizontally) in the rectangle and from black to white (vertically) within a text object. Those gradients are quite powerful and animatable, with any number of in between values and stop-values.

Fills can also be done with patterns (tiles), that can either consist of raster images or vector objects.

Files used

Right-click, save ...

Technical Details

Uniform, opaque colours

Colors, both fills and strokes, are assigned as we explained in the styles section, with CSS. But note that all CSS statements can also be assigned as attributes. Those three syntaxes have the same result on the screen, the difference comes with project management (easier with CSS) and interactivity (easier with attributes).

The syntax for a red filled circle is like the following,:
<circle ... fill="#ff0000"/>

For the definition of the colour-values alternative notations exist (e.g. fill="red") beside the hexadecimal-system. One can use predefined colour values (see before) or fill="rgb(255,0,0)" the RGB system, probably well-known. You may also use following syntaxes, all with the same result on screen as the one above:
<circle ... fill="#ff0000"/>
<circle ... fill="red"/>
<circle ... fill="rgb(255,0,0)"/>

Transparency

For alpha-blending, the shine through of the objects below, the syntax is similar. The values are between zero and one, one is default.

<circle ... opacity=".3"/>
Here transparency is set to 30 percent.

Gradients

Gradients definitions demand several parameters, they are predefined and used for the concerned objects within the file's header.

<defs>
  <linearGradient id="MyGradient" gradientTransform="rotate(45)">
    <stop offset="0%" stop-color="white"/>
    <stop offset="30%" stop-color="red"/>
    <stop offset="100%" stop-color="black"/>
  </linearGradient>
</defs>

Within the definitions section <defs> we define a gradient with the name MyGradient. The gradient leeds from white, over red to black, while the section for red is not exactly in the middle, but at 30 percent. The gradient is rotated with 45 degrees. Additional parameters are the gradient type (linear or radial), the definition of an abstract coordinate-system for describing the gradient, as well as the behaviour in case the gradient ends before the end of the object. (mirroring, repeating, running out)

The actual assignment is again done by using styles.
<rect fill="url(#MyGradient)" ... />

See also www.w3.org/TR/SVG/pservers.html#Gradients




Last modified: Monday, 03-Jul-2017 18:16:30 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://old.carto.net/papers/svg/samples/fill.shtml