Basic Objects for Diagrams

Circle, Ellipse, Path

<circle>

The "simplest SVG document":

`<svg xmlns="http://www.w3.org/2000/svg">` `<circle r="50"/>` `</svg>`
circle1.svg

Make sure you can open it in your browser and now let's experiment.

The r attribute of the circle controls its radius. By default, the circle is centered at (0,0). We may change its center by changing the values of cx and cy.

Let's expand the radius to 100 pixels and move the center to the point (200,150). While we're at it, let's make the circle red, by setting its fill attribute.

Red circle with center at (200,150) and radius=100.

`<svg xmlns="http://www.w3.org/2000/svg">` `<circle r="100" cx="200" cy="150" fill="red"/>` `</svg>`
circle2.svg

Several more experiments...

varying the radius, the color (or fill), the stroke-width, and the positioning of the circle:

circles.svg

Opacity and transparency:

opacity.svg

<ellipse>

An ellipse shares most of the attributes of a circle, except that instead of one radius, it has two: rx the distance from its center to either its left or right edge, and ry the distance from the center to the top )or bottom).

<ellipse ry="55" rx="100" cy="80" cx="150" stroke="black" stroke-width="3" fill="none"/>

The above code draws a simple ellipse that is a bit wider than it is tall.
We may also use the <g> (group) and <use> tags to reuse our code, making the overall expression not only smaller but easier to maintain as in the following illustration:

`<g fill="magenta" >` `<ellipse id="E" ry="55" rx="100" cy="80" cx="150" stroke="black" stroke-width="3" fill-opacity=".4"/> </g>` `<use xlink:href="#E" transform="translate(-40, 45)" fill="yellowgreen"/>`
ellipse1.svg

In the above illustration, we have defined everything about an ellipse except for its fill. That attribute is inherited from the <g> (a simple grouping tag that has no geometry of its own). As such we may reuse all aspects of the first ellipse, changing its location using transform/translate and its color (by giving it a new fill).

The judicious use of <g>, <use> and transform, allows us, with a minimum of code to create the familiar Venn4 diagram as follows:

`<g stroke="black" fill="none" stroke-width="3" >` `<ellipse id="E" ry="55" rx="100" cy="150" cx="250" transform="rotate(60, 250,150)"/>` `<use xlink:href="#E" transform="translate(-40, 45)"/>` `<use xlink:href="#E" transform="rotate(60, 250,150)"/>` `<use xlink:href="#E" transform="translate(40, 45) rotate(60, 250,150)"/> </g>`
fourVenn1.svg

One more illustration, using the proposed <replicate> tag, extends the above concept of code reuse, this time, using, changing the color gradually across the hue spectrum as the ellipses are replicated and rotated by 360/5 degrees at each step of One more illustration, using the proposed <replicate> tag, extends the above concept of code reuse, this time, using, changing the color gradually across the hue spectrum as the ellipses are replicated and rotated by 360/5 degrees at each step of the replication.

`<ellipse cy="350" fill-opacity=".4" cx="300" ry="80" rx="200" stroke="black" stroke-width="2" > <replicate repeatCount="5"> <replicateAttribute attributeName="transform" from="rotate(0 355 330)" to="rotate(360 355 330)" /> <replicateAttribute attributeName="fill" values="rgb(235,37,37); rgb(195,235,38); rgb(38,235,116); rgb(38,116,235); rgb(195,38,235)" /> </replicate> </ellipse>`
Venn five

<path>

The path is flexible, but complex. It consists of a variety of subcommands for drawing a complex shape consisting of components that can be lines, circular arcs, or Bézier curves.

Let's begin with a simple example: using two linear components to draw the letter "V" : we begin with a "MoveTo" command, positioning the "drawing cursor" at (30,10). Then "LineTo" segments are drawn first to (50,90) and finally to (70.10).

`<path d="M 30,10 L 50,90 L 70,10" fill="none" stroke="black" stroke-width="8"/>`
Vcoo.svg

We may simplify this code by eliminating either or both of the L commands and the commas:

<path d="M 30,10 L 50,90 70,10" fill="none" stroke="black" stroke-width="8"/>

<path d="M 30,10 50,90 70,10" fill="none" stroke="black" stroke-width="8"/>

and

<path d="M 30 10 50 90 70 10" fill="none" stroke="black" stroke-width="8"/>

are all equivalent since the default command is L, because once a subcommand (other than M) is invoked, it is assumed to remain in effect, and because commas and spaces are interchangeable (so long as at least one is used between coordinates).

If another example is desired, see this case study for drawing the letter M.

<path> becomes most relevant to the drawing of Euler and Venn diagrams when the A (arc), and Bézier (Q for quadratic and C for cubic) subcommands are used.

`<path d="M 150,300 L 250 300 A 50 50 0 1 1 200 350 L 200 150 A 50 50 0 1 1 250 200 L 150 200 A 50 50 0 0 0 150 300 " />`
tanglecoo.svg

In the above, the beginning part of the path data, "M 150, 300 L 250, 300" succeeds in drawing a line segment between those two coordinates. From 250, 300 where the path ended up, after the first line segment, then the A subcommand draws an arc of rx=50 and ry=50 terminating at 200,350. More details on the drawing of arcs may be found in either the SVG Primer or the SVG Specification.

The Bézier segments of SVG paths allow us to control not only where a curve goes, but the slope of that curve as it approaches its endpoints.

`<gfill="none" stroke="black" stroke-width="1">` `<path d=" M 30,30 C 50,10 50,50 30,30 C 10,10 10,50 30,30 "/>` `<path d=" M 70,30 C 50,10 50,50 70,30 Q 90,10 90,30 Q 90,50 70,30 "/> </g>`
Eightcoo.svg

In the above, Bézier curves are used to draw either two (left) or three (right) segments of figure eight curves. The cubic Bézier (using the C subcommand) uses two control points as well as two endpoints. In contrast, the quadradic Bézier (Q) uses just one control point between its two endpoints. In both cases, as may be seen by studying the above diagram, the control points are never actually traversed by the path, but merely set the slope of the tangent at the endpoints. Since one of our aesthetic criteria (#7) specifies that the angles of intersection between two curves should be high, Bézier curves can be very accommodating by allowing us to keep curves smooth and to control the angles at points of intersection.

One of SVG's advantages, is that once we have drawn a curve, it is very easy to put things in motion along that path:

knot2.svg

In some cases, SVG's animation might conceivably add to the legibility of a diagram by allowing the sets to be more easily differentiated from one another:

vplay.svg