====================================== Drawing with SVG - PD ====================================== Scryber includes the drawing capability with a subset of SVG capabilities. * Lines * Recangles * Elipses * Polygons * Bezier Curves * Groups * Text * Use and definitions * ViewPorts The drawing components should all be within a namespace qualified svg element, or prefixed svg at the document root. There are may resources for SVG available, below is a description of the capabilities of scryber's implementation of SVG. And it is perfectly possible to draw an entire page in SVG within a body or section. Drawing SVG content -------------------- .. code-block:: html

The svg content is below

I'm SVG

And after the svg content

.. image:: images/drawingPathsSVG.png As can be seen, the svg content is as a block and renders within the flow of the content. The rect(angle) picks up the styles from the css and the font flows down from the svg container. The use of svg a an inline, or inline-block may be supported in the future. With scryber it is possible to use svg elements directly in the document by delcaring a prefixed namespace at the top. And the example below will render the same. (See :doc:`namespaces_and_assemblies` for more information on how namespaces are used) .. code-block:: html

The svg content is below

I'm SVG

And after the svg content

.. note:: depending on the purpose, this might be advantageous. But not make any html parsers happy unless wrapped in an svg:svg element. All examples below will follow the standard convention. Supported shapes ----------------- Scryber supports the standard shapes for rectangles, elipses, circles and lines. Generally, as closed shapes they will have a black fill and no stroke. A group group (g) can contain multiple shapes and paths, and alter the style of inner content, e.g. applying a constitent stroke. Without a width or height the svg element in scryber with size to the inner content, but it is good practice to specify values. Scryber also supports the use of styles on the svg element itself. .. code-block:: html

The svg content is below

And after the svg content

.. image:: images/drawingPathsSVGShapes.png Polylines, gons and paths -------------------------- Scryber supports the standard paths, polylines and polygons .. code-block:: html

The svg content is below

And after the svg content

.. image:: images/drawingPathsSVGPolys.png A path has the operations explicitly defined within the 'd' attribute, see below. A polyline is rendered using secific x,y points from the top left of the container. A polygon automatically closes the path. Scryber does not currently support the use of patterns or gradients as fills e.g. fill='url(#mypattern)', but does support images as fills, and backgrounds e.g. fill='url(./path/toimage.png)'. We will look at this for future releases. Drawing paths -------------- Scryber supports the use of bezier paths for the creation of the complex curves and shapes. The format of the drawing data (d) is exacly the same as the **svg** drawing operations. * M = moveto * L = lineto * H = horizontal lineto * V = vertical lineto * C = curveto * S = smooth curveto * Q = quadratic Bézier curve * T = smooth quadratic Bézier curveto * A = elliptical Arc * Z = closepath .. code-block:: html

The svg content is below

And after the svg content

The viewbox defines the area visible and will scale the content of the svg appropriately to the required width and height. .. image:: ./images/drawingPathsSVGPathClock.png Line options ------------- The stroke style also supports the standed ending and join options for paths, that will alter the way lines and vertices are rendered. .. code-block:: xml Definitions and use ----------------------- Scryber supports the definition of shapes and reuse within the content. This can either be directly, or within another viewbox for scaling and position. The preserveAspectRatio is the standard svg enumeration that allows the content position in the viewbox to be defined on the outer container. .. code-block:: html

The svg content is below

And after the svg content

.. image:: ./images/drawingPathsSVGPathSmiley.png SVG Text --------- Scryber supports the use of the SVG Text and text spans for rendering characters within the drawing. .. code-block:: html

The svg content is below

My cat is Grumpy!

And after the svg content

Here we are linking to and using the Roboto font from the google api's. .. image:: ./images/drawingPathsSVGText.png Referencing drawings -------------------- It is also possible to load an svg file directly into the document with an embed option. .. code-block:: html

The svg content is below

And after the svg content

And the referenced SVG file is ./Fragments/MyDrawing.svg .. code-block:: xml A B C .. image:: ./images/drawingPathsSVGPathReference.png Attributes Supported ---------------------- Only a few of the full capabilities and attributes of SVG are supported. More are supported using the style='' css attribute settings, and we will be adding more in future.