Learn svg

Preface
"With SVG, Web graphics move firmly from mere decoration to true graphical information.
Scalable Vector Graphics are the key to providing rich, reusable visual content for the Web.
At last, designers have the open graphics format they need to make professional graphics not
only work visually on the Web, but perform as searchable, reusable Web content."

- Tim Berners-Lee, W3C director and father of the World Wide Web.

"Designers are reaching larger audiences with an increasing variety of Web-enabled devices
from palmtops to desktops to printers. They need graphics which can be restyled for different
purposes. But most of all, they need to be able to handle their graphics the same way as their
text and business data, which nowadays are in XML. SVG is specifically designed to let them
do that."

- Chris Lilley, W3C Graphics Activity Lead.

Introduction

The first thing you need to know is the authors of Learn SVG are experts in the field of
computer graphics (CAD/simulation background, Graphics Programming and Web Design).
The next thing you need to know is Learn SVG is a tour de force through the world of SVG.
Please do not worry, every concept covered is followed up by clear, intriguing examples that
serve to instruct and inspire.

Scalable Vector Graphics (SVG) is a revolutionary new graphics format that is unleashing
the true potential of graphical information on the Web. SVG is a language for describing two-
dimensional graphics in XML. SVG supports anti-aliased rendering, zooming, panning, filter-
effects, pattern and gradient fills, clipping to paths, text, animations and interactivity and
more! SVG is designed to use and to incorporate other W3C specifications and standards
such as DOM, CSS, XSLT , SMIL.

SVG gives developers, designers, and publishers the ability to create rich lightweight,
interactive, extensible documents that are ideally suited for use on the Web. SVG allows for
pixel-perfect positioning of SVG graphical objects, which include shapes, text as well as
raster graphics such as PNG and JPEG images and supports color accuracy of over 16
million colors.

SVG is revolutionary in that it can be fully customized on the client at runtime by means of
style sheets and script. Users are able to customize colors, fonts, content and even the layout
of graphical objects on the client-side.

You can unleash the power of SVG by combining it with scripting. SVG uses the W3C DOM
(Document Object Model) for scripting SVG documents. SVG has its own document object
model that extends the DOM in a compatible way called the SVG DOM. By being able to use
both of these object models, SVG is able to be scripted in a open and powerful way.

Learn SVG Chapter 1 Introduction 2

This book has a special focus on scripting. The scripting content is complete for beginners, as
it introduces EcmaScript and the DOM first and shows how to access and manipulate the
internals of a SVG document via programming.

Furthermore, the book focuses on the generation of highly interactive graphics and shows in
detail how to deal with event handling. Learn SVG will also cover necessary insights into the
essential theory of vector and matrix algebra to explain the guts of the efficient raw
transformation matrices that can even be controlled by the client at runtime.

Aims and Objectives of the Book
About Learn SVG / Approach

The objective of this book is to enable readers who are brand spanking new to SVG to reach a
semi-advanced level of SVG design and programming through a progression of "real-world"
case studies, examples, and scenarios that programmers, Web developers and graphic
designers will face. The reader we will move on to more advanced topics of adding style,
gradients and filter effects, menu creation, animation, script-based interactivity, publishing,
extensibility, and finally implementing cover some cutting-edge SVG Web applications. In
the process, the reader will be transcended from a beginner to a semi-expert SVG developer.

Throughout this book the presentation of both basic and complex concepts are accompanied
by intriguing examples, real-world scenarios and brilliant user interface designs. By the end of
this book the reader will be well equipped to ride the SVG wave and integrate SVG into XML-
based technologies that are at our doorstep.

The challenges of gracefully integrating both the graphic design and programming aspects of
SVG are not insignificant. But with the help of some terrific editors and reviewers we have
produced an excellent foundational text for your reading pleasure.

The workbook-like format of this book lends itself ideally to Web designers and developers
who want both a solid foundation in the main aspects of SVG and who are willing to get their
hands dirty with the fertile soil that SVG has to offer. The full challenge of the book is not for
the faint of heart but Learn SVG has made sure to thoroughly cover all the bases using many
concrete examples.

The purpose of Learn SVG is to inform and inspire readers by covering SVG programming
and design techniques through in-depth examples. This book is for people who are relatively
new to SVG and who want to start fiddling with the guts of SVG right away. This book will
jump right in to real-world examples that can serve as both a workbook and a reference. The
large pool of current programmers, Web developers, content publishers and graphic designers
will find that this book gives them an invaluable edge in their respective and increasingly
overlapping fields.


Audience of this Book
Due to the fact that SVG is revolutionary, Learn SVG aims to educate a wide-ranging
audience including:

• Web developers and Graphic designers who want to implement powerful Web
applications and Services

• Content-management professionals who need to display visualizations of data

• GIS-people: the world of geographical information systems

• Creators and maintainers of (industrial) technical drawings such as Engineers and
Architects

• The XML-community

• The Flash-community

This book is aimed to inspire many types of content-creators to love SVG. This book
provides a solid foundation for getting started with SVG. We will cover the basics as clearly
and concisely as possible. On the other hand, there is a lot to this new graphics
format/language and so we have included "SVG Concepts", challenges, and advanced
exercises at the end of each chapter that introduce more complex topics for the avid Web
developer. If you are here for the full challenge then please fasten your safety belts and hang
on tightly lest you be thrown to the wolves.

Conventions and Terminology
We use a number of different styles of text and layout in the book to help differentiate
between the different kinds of information. Here are examples of the styles we use and an
explanation of what they mean:

Indentation
Indentation improves readability. Following convention is used for:
• children elements
• elements spanning several lines

Indentation of children elements is 2 space characters.

Elements spanning several lines are broken so, that attributes are in line.

Here is an example of both types of indentations:

<svg width="200" height="100">
<circle cx="10" cy="86" r="15"

fill="red"
stroke="black" />

</svg>

Emphasizing of important code and terms

When you first come across an important term it will be in bold type, then in normal type
thereafter.
We'll use a Courier to emphasize words and phrases that appear on the screen, and code.

Code that is new, important or relevant to the current discussion will be presented like this:

<svg>
<ellipse cx="50" cy="50" rx="10" ry="20" />
</svg>

Code blocks

<circle cx="10" cy="86" r="15"
fill="red"
stroke="black" />

</svg>

Menu Commands

Menu commands are written in the form:

Menu > Sub-menu > Sub-menu

Scripting
The script language used throughout this book is EcmaScript, which the W3C accepts as an
open scripting standard. The corresponding element is always :

<script type="text/ecmascript">
<![CDATA[
// script content goes here ..
]]>
</script>

SVG Elements
It is beneficial, to have a common skeleton for introducing a new SVG element or a family of
new elements throughout the book.

The format that will be used will be:

• Introductory text

• Element syntax

• Explaining element specific attributes. text or table

• Element example(s): picture and code

The Element Syntax always looks similar to this example

Syntax:

<marker id="name"
refX="coordinate"
refY="coordinate"
markerWidth="length"
markerHeight="length"
markerUnits="strokeWidth | userSpaceOnUse"
viewBox="min-x min-y width height"
orient="auto | angle"
style-attribute="style-attribute">

</marker>

What You Need To Use This Book

• Basic understanding of HTML XML

• One of the following SVG Viewer ( See Appendix C)


Chapter 1
"Make everything as simple as possible, but not simpler."
- Albert Einstein (1879-1955)

Chapter Objectives
• History of SVG
• SVG is XML
• Raster vs. Vector Graphics
• SVG Concepts
• Viewing SVG
• Creating SVG

Introduction
Learn SVG explores the world of Scalable Vector Graphics. SVG is a graphics format that
has been developed as an open source industry standard graphics format and is maintained by
the W3C. SVG describes graphics using XML grammar. SVG interrogates and conforms
with Web standards such as DOM, XML Namespace, Xpath, Xlink and XPointer and many
others that will addressed in this book. The key to SVG is in fact that each of these robust
standards seamlessly works together with SVG. This allows SVG to be stylized, dynamic,
animated, interactive, extensible and an all-around extraordinary graphics format. In SVG we
find the culmination of the next generation of the Web. This is why SVG makes for a truly
astounding and robust presentation layer for the Web.

We have a lot to cover so let’s start with some inspiration. You will need a SVG Viewer to
view figure 1.1. If you do not have a SVG Viewer Please see Appendix C to help you pick
one out.

Figure 1-1: Inspirational SVG image


How SVG Emerged

There has been a lot of excitement and generated by this graphics format as it has become a
vital part of Web development. SVG is a creation of the World Wide Web Consortium
(W3C), which is an open–standards international industry consortium that has been formed to
develop open-source standards for the Web.

SVG emerged through the work of a The World Wide Web Consortium working group that
was formed back in 1998. The W3C SVG Working Group continues to improve the
capabilities of SVG. W3C working groups are comprised of representatives from a variety of
industries across the world. There are over twenty members of the SVG Working Group
including some of the top industry leaders such as: Adobe Systems, Sun Microsystems, IBM,
Corel, Macromedia, Hewlett–Packard, Microsoft, and AOL/Netscape.

With the development of XML the opportunity arose to create an XML-based language to
describe graphics. The W3C gave the SVG working group the goal of developing a XML
graphic format that could produce top quality graphics. SVG does just that and a great deal
more as we will be discovering throughout this book.

In 1998, the W3C was presented with two proposals for new graphics formats. Both
Precision Graphics Markup Language (PGML) and Vector Markup Language (VML)
are described using an XML grammar. Adobe proposed PGML based on its experience with
Postscript and PDF, PGML is in fact generated from PDF files. Support for Microsoft’s
submission, VML, has been realized in Internet Explorer, but development stopped in the
autumn of 1998.

After much consideration the W3C decided to combine the best aspects of both of the PGML
and VML languages into a new language called SVG.

On August 2nd and again on November 2nd of 2000 the W3C upgraded SVG to Candidate
Recommendation and urged developers to begin implementing SVG. One and half years
after the first SVG Working Draft was published, Chris Lilley, the Activity leader and chair of
the SVG Working Group, announced the release of the SVG 1.0 specification as a W3C
Recommendation. The SVG 1.0 specification was finalized by the W3C on September 4,
2001. This means that SVG has been thoroughly tested and is an industry standard that is
ready for full-scale implementation. The SVG Working Group is continuing to expand the
capabilities of SVG in their work on SVG 1.1 ,SVG 2.0 specifications and the SVG Mobile ,
Tiny profiles.

The SVG Working Group is continuing to expand the capabilities of SVG. In Jan of 2003
SVG 1.1 and SVG Mobile specifications were released. Work continues on the long
anticipated SVG 1.2, SVG 2.0 and SVG Print specifications that will probably support highly
desired features such as text-wrapping.


This is the current SVG Roadmap.

Document WD1 WD2 LC Ends CR PR REC
SVG 1.0 - - - - - - 5 Sep
2001
SVG 1.1 - - - - - 11 Nov 14 Jan
2002 2003
SVG Mobile - - - - - 11 Nov 14 Jan
Profiles 2002 2003
SVG 1.2 11 Nov [Jan [May [July [August [Dec [Jan
2002 2003] 2003] 2003] 2003] 2003] 2004]
SVG Print [Jan - - - - - -
Requirements 2003]
SVG Print [Mar - - - - - -
2003]
Authoring [Feb - - - - - -
Tool 2003]
Guidelines
Accessibility [Mar
Techniques 2003]

Legend: WDn = n'th working draft; LC = last call for comments (i.e., last
WD); Ends = deadline for LC comments; CR = Candidate Recommendation;
PR = Proposed Recommendation; REC = W3C Recommendation.
[Feb '02] = expected date.

SVG is XML

SVG is based on eXtensible Markup Language (XML) grammar, the standard markup for
Web documents in the 21st century. Other XML-based applications that are in use or under
development include XHTML, MathML, SMIL, X3D, XFORMS, and many others. Rapid
adoption and application of these technologies has already occurred and offer a state-of-the-
art foundation for documents. As you can see, SVG is built with the future of the Web in
mind.

SVG being an application of XML benefits from all the advantages XML brings. SVG is text-
based and open source web standard.

If you are familiar with XML you will see that there really is nothing new about the structure
of the SVG language. As you can see in figure 1-1, SVG is composed of content marked–up
within “tags” which are made up of “elements” and “attributes”.
The following diagram examines components of the SVG language using XML grammar and
syntax:


Figure 1-2: SVG syntax and basic grammar

SVG is Efficient

SVG is a text based graphic format. This means that SVG files are just plain old text files.
SVG graphics files are very small compared to other graphic file formats.
The image in figure 1.1 ends up having a file size of around 2.3 KB. (Note that there is a
reference to one external jpeg image that has been positioned over the letter "G" that is really
making the file size huge.) If we use gzip to compress the SVG file then it ends up being less
than 1 KB. This is tiny!

You will find this to be especially astonishing when you discover that this image can be
infinitely scaled without any loss in image quality, except for any referenced raster content.
Also, because SVG conforms to the Document Object Model (DOM) and style sheets, all of
the elements and attributes of figure 1.1 can be efficiently accessed and manipulated. If you
wanted any of the objects in the graphic to move, you can just add some animation elements
or script at almost no cost to size of the file.

SVG is Powerful

For the past ten or more years programmers have been thinking about how best to introduce
two-dimensional vector graphics to end users. The benefits of using vector graphics include
greater interaction and analysis with the user interface including such functionality as
panning, zooming and best of all programmatic animation. One excellent aspect of SVG is
that once downloaded to the client it can be reused on a page at different sizes or with
different features and even different data.

A host of technologies can work together to make SVG the ultimate graphics format and
XML application. For example, ECMAScript, CSS, XSLT and XSL-FO can be applied to
SVG on the client to provide truly dynamic, user-friendly and interactive Web documents.
Also, since SVG conforms to the XML specification it is also extensible which means that
SVG can be viewed inline with other XML-based languages / applications such as XHTML,
SMIL, XFORMS and MathML.

SVG has several key advantages over other graphics formats used on the Web. These
include:


• Scalable – SVG images do not degrade upon “panning” and “zooming”, which is ideal
for many things such as portable devices, mapping, charting, printing at any size and
technical diagrams.

• Plain text – Developers and designers can edit SVG code using a wide variety of tools.

• Smaller file sizes – Compression techniques and the effectiveness of SVG's
vocabulary can make SVG files very small and ideal for use on the Web.

• Searchable - SVG content is text and therefore can be “searched” and “indexed”.

• Infinite color and font options - 16 million colors and support for embedded fonts
which means what is seen on the screen will look exactly the same when printed

• Native image effects – drop-shadows, blurs, and lighting effects can be applied when
SVG is being rendered on the client side. The dynamic filter effects of SVG are a true
breakthrough for graphics on the Web.

• Animation – SVG includes built-in elements for declarative animation effects and can
also be animated through the SVG DOM with script.

• Interaction – Script can control animation and allow for advanced user-friendly
interactivity.

• XML - Compatibility with XML, HTML4, XHTML as well as conformance to CSS,
XSL-FO, and the DOM means that SVG is extensible, can be styled , scriptable,
extensible, interactive and integrates easily with other XML languages.

SVG is Scalable (Vector Graphics)

Until recently Web developers only had the option of using these bitmap graphic formats to
render images in browsers. The main bitmap graphic formats that are used on the Web today
are:

• Graphics Interchange Format (GIF)
• Joint Photographic Experts Group (JPEG)
• Portable Network Graphics (PNG)

Bitmaps graphics belong to a class of computer graphics called raster graphics. Raster
graphics are displayed by a method of filling in a matrix of pixels, which requires storing the
information for every pixel of the graphic.

Vector graphics such as SVG and SWF formats are different beasts altogether belonging to
another class of graphics that are rendered using short line segments called vectors. Also,
vector graphics contain geometric objects such as lines and curves.


Although bitmap images do work very well in many situations, vector graphics open up a
whole new world of possibilities in Web graphics. For example compare the following two
screenshots of the same SVG image. This is the original view of this vector graphic.

Figure 1-3: Original size Figure 1-4: Size after zooming in

Notice that we have not lost any quality. This is because the vector-based viewers are able to
recalculate how the graphic should look based on the textual description of the circle shape
that is found inside of the SVG graphic. This is a key advantage of SVG and raster graphic
formats.

Because vector graphics are defined programmatically they provide a more efficient means
for rendering print and animation, as well as adding interaction (including panning and
zooming) and analytical capability.

One of the limitations of bitmap images is how they describe graphics. Bitmaps do not
describe graphics as shape elements or objects but instead have to describe each and every
pixel in the image. Bitmaps can make use of efficient compression techniques and can be
streamed because its data is stored serially, however as you will see in these screenshots the
scalability of vector graphics is a tremendous advantage over raster images.

Figure 1-5: Original image

Figure 1-6: Vector image at 300% Figure 1-7: Raster image at 300%


The raster image becomes very pixilated when it is scaled while the vector image loses
absolutely no image quality! SVG is a Vector graphic format. Now, you know why SVG is
called Scalable Vector Graphics.

The Building Blocks of SVG

Scalable Vector Graphics (SVG) is a completely open standard XML language for describing
two-dimensional graphics using a combination of three types of graphical objects: vector
graphic shapes, images and text. Let’s take a minute to explain in detail what that last
sentence actually means.

SVG is Composed of Graphical Objects

SVG is made up of three types of graphical objects: shape, image and text objects.

Figure 1-8: Graphic Objects in SVG

Shapes in SVG

The following image can be displayed using HTML via the <image> element, or it can be
displayed using SVG via the <circle> element.

Figure 1-9: Circle in SVG

HTML document:

<html>
<head>
<title>Pink Circle</title>
</head>
<body>


<img src=”circle01.gif” />
</body>
</html>

SVG document:

<?xml version=1.0” ?>
<title>Pink Circle</title>
<circle cx="50" cy="50" r="40" fill="pink" stroke="black"/>
</svg>

So if both documents can produce the same looking circle then what is all this excitement
surrounding the SVG graphic format? What are the kinds of benefits and drawbacks of using
SVG rather than HTML? Those are great question that this book will reveal.

SVG shapes objects include the following elements: <path>, <line>, <rect>, <circle>, <ellipse>,
<polyline> and <polygon>. The <path> element is able to describe more complex shapes using
Cubic and Bezier curves. We will cover Shapes in chapter 2 and the more complex <path>
element in several chapters though out the book.

Shapes are not always the most efficient method of rendering image content. The W3C SVG
Working Group recognized this and provides two more graphic objects to help: Images and
Text. How to inline and embed SVG images will be exported in many chapters.

Images in SVG

In SVG, raster images are actually graphical objects. This gives the developer or end-user the
ability to, for example, apply client-side animation and filter effects on specific raster images
as we saw in the figure 1.1. Notice that the raster image in the top right corner is semi-opaque!
We will discover how this was accomplished in the next chapter. SVG Recommendation
states that an SVG Viewer has to support two raster formats.
The two formats are JPEG and PNG. The SVG Viewer can support more raster formats.

Text in SVG

After shapes and images, the third graphical object in SVG is text. As a graphical object, text
can be programmatically controlled and manipulated through script just like shapes and
images!

SVG text is composed of font characters that technically are in turn comprised of glyphs. We
will describe the difference between fonts and glyphs and many other interesting features of
using text in SVG in greater detail in Chapter 5.

SVG in Practice


SVG is already taking off as demonstrated in the computer industries widespread support of
SVG in major product lines, third-party tools and Web applications. Please see Appendix C
for a listing of Products, third-party tools and Web applications.

Viewing SVG

Before we start working with SVG let’s make sure we’re all on the same page. A prerequisite
for this book is that you have the resources in place to at least be able to view SVG. Please see
Appendix C to help you quickly pick out a SVG Viewer.

Creating SVG

Hand-coding SVG

So now that we know what SVG is and what SVG is made of let’s start creating some SVG of
our own. The quickest and easiest way to ease into understanding SVG is by hand-coding
your first few SVG graphics. Hand-coding SVG graphics is actually not too difficult so take
out our magic keyboard, open your favorite text editor and follow along as we journey into
the land of Scalable Vector Graphics.

This next example will be very short and simple – black rectangle.

One of SVG's greatest assets lies in its ease of use. SVG is quite simple and you can create
SVG without the use of a graphical authoring environment. Our first example of SVG shows
the basic structure of a complete SVG graphic/document.

Line 1: <?xml version=”1.0” ?>
Line 2: <svg>
Line 3: <rect x="100" y="50" width="100" height="100" />
Line 4: </svg>

This code creates this shape:

figure 1-10: rectangle with default fill

Line 1: The XML Declaration and the XML version of this document.
Line 2: Opens the SVG document
Line 3: Creates an SVG shape using the <rect> element, specifies:
a: top left corner of rectangle positioned at ‘x’ and ‘y’ attribute values
b: specifies the width and height of the rectangle by setting the ‘width’ and
‘height’ attribute values.


Line 4: Closes the SVG document

Notice that the default fill color is black. We will cover styling in detail in Chapter 5.

Summary

Congratulations! You have just created an SVG-powered Web page. If you liked this
exercise then just hold tight because we will continue to expand your SVG knowledge. If you
found this exercise to be somewhat boring we will quickly be moving on to bigger and better
things! Beauty is in the eye of the beholder.

Up to this point we have quickly covered the main questions involved in creating, viewing
and editing SVG without going into undue depth. In the next section we will continue to
partake of the SVG feast by analyzing shapes, text, and images.

As mentioned earlier SVG is ideally suited for use on the Web, so in this book we will be
dealing with all aspects of using SVG on the Web. Also found in this book are a number of
great SVG images with the accompanying source code that should be of great value to both
designers and developers.

In Chapter 1 we learned what SVG is and began to familiarize ourselves with the tools of
SVG. We also quickly covered how to create and view SVG output.
Hopefully you are having fun. Do always remember that it is a state of mind. And as Yoda
says, “Your focus determines your reality”.

Chapter 2 Basic Shapes
"What you see is all you get."
- Brian Kernighan4

"In theory, there is no difference between theory and
practice. But, in practice, there is."
- Jan L.A. van de Snepscheut

"Form must follow function."
- Le Corbusier

Chapter Objectives
• The SVG Header
• The ‘svg’, ‘desc’ and ‘title’ Elements
• Presentation Attributes: Stroke and Fill
• Basic Shapes ‘line’, ‘circle’, ‘rect’, ‘ellipse’,
‘polyline’, ‘polygon’
• Basic Shape Reference
• The ‘image’ Element

Overview

If you will recall from Chapter 1, SVG offers three types of graphical objects: shapes, images,
text. In this chapter we will be exploring basic SVG document structure, basic presentation
attributes and basic shapes, images and a little about text. We will cover all aspects of text
processing in depth in Chapter 5. Mastery of these concepts will provide us with the building
blocks for most everything that we will do with SVG.

The SVG Header

The code below demonstrates the structure of a complete SVG document. The document is
composed of the XML declaration, the DOCTYPE declaration, and the SVG Document
Fragment.
This is the complete SVG header:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="350" height="300" xmlns="http://www.w3.org/2000/svg">

</svg>

The first line of the SVG header is the standard XML processing instruction that efficiently
states this document conforms to the XML 1.0 specification, uses UTF-8 character encoding
and depends on a Document Type Definition (DTD) external to the document to parse
correctly. Where is this DTD located? The second line holds the secret to this information. In
the second line, the ‘DOCTYPE’ states where the DTD is located and the name of the
document element it will be applied to. In this case, the DTD is applied to a document
element named ‘svg’. The DTD provides the grammar and rules for the document.

Learn SVG Chapter 2 Basic Shapes 2

Let’s take a look at a sample that uses the complete SVG header and adds some SVG
elements:

Figure 2-1. Line and circle with style

<?xml version=”1.0” encoding=”UTF-8” standalone=”no”?>
<title>SVG - Introduction</title>
<desc> This graphic demonstrates many exciting features of SVG.</desc>
<circle cx="50" cy="70" r="30" fill="grey"
fill-opacity="0.4" stroke="darkslategrey"
stroke-width="2">
<desc>Basic circle</desc>
</circle>
<line x1="72" y1="50" x2="110" y2="10" stroke="darkslategrey"
stroke-width="2"/>
</svg>

Now, let’s take a closer look at the ‘svg’ element and new SVG elements we added to the
code.

The basics of the <svg> element

After the doctype declaration is the ‘svg’ element. In our example, the ‘svg’ element contains
all other elements. This makes the ‘svg’ element the document element of the document.

</svg>

You may have noticed the attributes on the ‘svg’ element. What do they do? The ‘width’ and
‘height’ attributes describe the width and height of the SVG graphic. The height and width
attributes can also be used on some graphical objects such as rectangle elements.

2


Figure 2-2. Rect with ‘width’ and ‘height’ attributes

<rect x="40" y="20" width="140" height="70"
stroke="black" fill="lightgrey" />
</svg>

There are many more properties that can be defined on the ‘svg’ element. We will explore
these properties in the next chapter and throughout the book.

Now, let’s look at the new SVG elements we added to the document. You will see 'title',
'desc', ‘circle’, ‘line’ element. We will look at ‘title’ and ‘desc’ in this section and will cover
‘circle’ and ‘line’ later on in the chapter.

The basics of ‘title’ and ‘desc’

Looking again at the code example you will see in bold ‘title’ and ‘desc’ elements:

<title>SVG - Introduction</title>
<desc> This graphic demonstrates many exciting features of SVG.</desc>
<circle cx="50" cy="70" r="30" fill="grey"
fill-opacity="0.4" stroke="darkslategrey" stroke-width="2">
<desc>Basic circle</desc>
</circle>
<line x1="72" y1="50" x2="110" y2="10" stroke="darkslategrey"
stroke-width="2"/>
</svg>

In SVG, all elements can have the ‘title’ and ‘desc’ elements as children. This allows every
element can have a title and description. The content of ‘title’ and ‘desc’ will not be displayed
to the screen.

3


An interesting note in the SVG recommendation leaves the implementation of these elements
up to the implementers of the SVG processor. This means that some viewers may implement
functionality for the ‘title’ and ‘desc’ attributes, some will not. For example, A SVG viewer
may use the ‘desc’ element for a “tooltip” and the ‘title’ element that is the child of a ‘svg’
documents element for the title of the web page. Note that ‘title’ element in SVG behaves
differently then ‘title’ attribute of HTML. But do not worry, using the SVG’s Document
Object model and scripting we will show you how to create your own “tooltips”.

Note to reader
For the rest of the book we will leave out the complete SVG header to help us focus on the
SVG elements and attributes and improve the readability of the code. That being said, we
highly recommended that you always use the complete header in your own documents. So for
readability each of the SVG code samples will take this form:

<?xml version="1.0"?>
</svg>

Units of Measurement: Throughout the rest of the book no CSS units (pt, mm, px, etc.) will
be used. This is due to the fact that the SVG working group is considering better alternatives
to CSS units in future SVG versions. The SVG working group recommends avoiding these
units today and so we will follow that recommendation. Instead we will not specify any unit
type so that our SVG graphics will default to what is called user units. We will always refer
to our coordinates as user “units” rather than any specific CSS unit of measurement.

Style Properties

Graphical objects can be much more useful when they have been stylised. In this section we
will show how to apply a few of the most common style properties to shapes using
presentation attributes. You can find a complete listing of all of SVG’s presentation
attributes in Appendix B.

Styling with CSS vs. Presentation Attributes

Style can be applied to SVG in a number of ways. Throughout this book we will be using
presentation attributes rather than CSS to stylize our images.

Presentation attribute have the syntax:

style = “name of style”

CSS style has this syntax:

style = “name of style : value”

Presentation attributes such as fill="red" are used exclusively in code examples because they are
easier to read and understand than CSS styles such as style="fill:red". Styling with CSS will be
covered in Appendix B.

4


Colors
We can not talk about 'fill' and ‘stroke’ property until we address how to specify a color.

Color in SVG was adopted from the CSS specification which means that everything you
learned about CSS color is the same for SVG! There are two main ways to define a color and
they are through color keyword names or through the RGB color model.

If you want to specify that a graphical object have its interior color be “lightgray” this is all
you need to do.

Figure 2-3. Rect with fill value

<rect x="50" y="30" width="200" height="100" fill=”lightgray” />
</svg>

Alternatively, colors can be specified using three- or six-digit hexadecimal RBG notation
#rgb, rgb(000,000,000) or rgb(0%,0%,0%). For example each of these notations specifies a
color value that is equal to the color ‘white’:

#FFF = #FFFFFF = rgb(255,255,255) = rgb(100%,100%,100%)

In SVG syntax, the color “white” would look like this:

<rect x="50" y="30" width="200" height="100" fill=”#fff” />
<rect x="50" y="30" width="200" height="100" fill=”#ffffff” />
<rect x="50" y="30" width="200" height="100" fill=”rgb(255,255,255)” />
<rect x="50" y="30" width="200" height="100" fill=”rgb(100%,100%,100%)” />

We have included a list of SVGs color keyword names and hexadecimal RBG notation in a
color chart in Appendix A.

The ‘fill’ and ‘stroke’ properties

Let’s take a look at how to use the ‘stroke’ and ‘fill’ presentation attributes. All of SVG’s
graphical objects have an outline and an interior space. The outline is called the ‘stroke’ and
the interior is called the ‘fill’.

We can set an object’s ‘stroke’ and ‘fill’ property values through presentation attributes.

‘fill’ Properties

When you use the ‘fill’ property it will fill the interior of an graphic object with a color,
gradient or pattern. We will cover gradient and pattern fully in future chapters. The ‘fill’
attribute specifies the color of the graphic objects filled region. The ‘fill’ property is used to
fill graphical elements interior with the specified ‘paint’ value.
5


Fill Property Reference Table

The ‘fill’ properties include:
fill
fill-opacity
fill-rule

Each of these properties is defined in greater detail here.

Fill Properties:

Property Description
fill A color value that defines the color of a shape or text interior.
A number between 1.0 and 0 with 1.0 being opaque and 0 being
fill-opacity
transparent that defines the opacity of a shape or text interior.
A value of ‘nonzero’ or ‘evenodd’ that is used to determine interior
fill-rule
for intersecting lines.

fill-opacity

This is syntax definition for the ‘fill’ property.

'fill'
Value: <paint>
Initial: black
Applies to: Shapes and textual content
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

Each of these ‘fill’ color attributes are demonstrated in figure 2-3.

Figure 2-4. Fill property colors

<rect x="10" y="10" width="40" height="40" fill="cornflowerblue"/>
<rect x="30" y="25" width="40" height="40" fill="#64DDDD"/>

6


<rect x="50" y="40" width="40" height="40" fill="rgb(100, 100, 237)"/>
<rect x="70" y="55" width="40" height="40" fill="rgb(50%,50%,50%)"/>
</svg>

fill-opacity

Value: <opacity-value> | inherit
Initial: 1
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

The ‘fill-opacity’ property sets the amount of opacity the interior of a graphical object will
have.

The default opacity value is 1 (opaque) with 0 (transparent) being the lowest possible value
for this property. In figure 2-4 we have set varying opacity values.

Figure 2-5. Fill-opacity property

fill="cornflowerblue" fill-opacity=”0.7” />
fill="#64DDDD" fill-opacity=”0.5” />
fill="rgb(100, 100, 237)" fill-opacity=”0.3” />
fill="rgb(50%,50%,50%)" fill-opacity=”0.1” />
</svg>

fill-rule

Value: nonzero | evenodd | inherit
Initial: Nonzero
Inherited: Yes
Percentages: N/A
Media: Visual
Animatable: Yes

7


The ‘fill-rule’ property determines the internal and external portions of a shape. Often this is
straight-forward but this becomes more tricky with complex shapes. This next example
comes straight from the SVG 1.2 Specification.

Figure 2-6. Fill-rule property – ‘nonzero’

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example fillrule-nonzero - demonstrates fill-rule:nonzero</desc>

fill="none" stroke="blue" />
<defs>
<path id="Triangle" d="M 16,0 L -8,9 v-18 z" fill="black" stroke="none" />
</defs>
<g fill-rule="nonzero" fill="red" stroke="black" stroke-width="3" >
<path d="M 250,75 L 323,301 131,161 369,161 177,301 z" />
<use xlink:href="#Triangle" transform="translate(306.21 249) rotate(72)"
overflow="visible" />
<use xlink:href="#Triangle" transform="translate(175.16,193.2) rotate(216)"
<use xlink:href="#Triangle" transform="translate(314.26,161) rotate(0)"
<use xlink:href="#Triangle" transform="translate(221.16,268.8) rotate(144)"
<use xlink:href="#Triangle" transform="translate(233.21,126.98)
rotate(288)" overflow="visible" />
<path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z
M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z" />
<use xlink:href="#Triangle" transform="translate(600,188) rotate(0)
translate(107,0) rotate(90)" overflow="visible" />
<path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" />

8


translate(49,0) rotate(-90)" overflow="visible" />
</g>
</svg>

Stroke Properties

When you use the ‘stroke’ property it will stroke the outline of an graphic object with a color,
gradient or pattern. We will cover gradient and pattern fully in future chapters.
There are several stroke-related properties including:
stroke
stroke-width
stroke-opacity
stroke-linecap
stroke-linejoin
stroke-dasharray
stroke-dashoffset
stroke-miterlimit

Each of these properties is defined in greater detail here.

Stroke Properties:

Property Description
stroke A color value that defines the color of a shapes or text stroke.
A number or percentage value that defines the width of a shapes
stroke-width
or text stroke.
A number between 1.0 and 0 with 1.0 being opaque and 0 being
stroke-opacity
transparent that defines the opacity of a shapes or text stroke.
A set of user coordinate numbers that define the repeating dash
stroke-dasharray
and gap length of a stroke.
A value of ‘butt’ (default), ‘round’ or ‘square’ that specifies the
stroke-linecap
stroke shape at the end of line segments.
A value of miter (default), round or bevel that indicates the stroke
stroke-linejoin
shapes of the corners of basic shapes and paths.
A number >= less than 1 that defines the limit on the ratio of the
stroke-miterlimit
miter length to the stroke-linewidth.

stroke and stroke-width

Here are the syntax definitions for each of the ‘stroke’ and ‘stroke-width’ properties.

9

'stroke'
Value: <paint> (See Specifying paint)
Initial: none
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

'stroke-width'
Value: <length> | inherit
Initial: 1
Inherited: yes
Percentages: Yes
Media: visual
Animatable: yes

In this example we have used presentation attributes to apply stroke color and stroke-width
properties to the lines.

Figure 2-7. Stroke property

<svg>

<line x1="0" y1="20" x2="100" y2="20"
stroke="darkslategray"/>
<line x1="25" y1="30" x2="125" y2="30"
stroke="darkslategray" stroke-width="4"/>
<line x1="50" y1="40" x2="150" y2="40"
stroke="darkslategray" stroke-width="6"/>
<line x1="75" y1="50" x2="175" y2="50"
stroke="green" stroke-width="8"/>
<line x1="100" y1="60" x2="200" y2="60"
stroke="blue" stroke-width="10"/>

<line x1="0" y1="20" x2="100" y2="60"
stroke="black" stroke-width="1"/>
<line x1="100" y1="20" x2="200" y2="60"
</svg>

As you can see, the ‘line’ element has a different ‘stroke’ color and different ‘stroke-width’.
Each of these properties is used to affect the outline appearance on the graphic object to
which it is applied.

10


stroke-opacity

Value: <opacity-value> | inherit
Initial: 1
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

The stroke is always centered on the outline of the graphic object. This means that half of the
stroke is on the inside of the graphic object and the other half of the outline is on the outside
of the graphic object.

Lets look at the next example which makes use of the ‘stroke-opacity’ property:

Figure 2-8. Stroke-width property illustrated using stroke-opacity

fill="#CCCCCC" stroke="blue" stroke-width="15"
stroke-opacity="0.2"/>
</svg>

As you can see in the example above, by using the stroke-width and stroke-opacity properties
we can easily create some interesting effects. We have made what seem to be three different
rectangles. When adding style to graphic object some interesting scenarios can develop. For
example, what would happen if the ‘stroke-width’ property value were greater than the
interior space of the graphic object? Try it. As you might have guessed, the stroke can
consume the interior space and completely paint over the shapes fill.

stroke-dasharray

'stroke-dasharray'

Value: none | <dasharray> | inherit
Initial: none

11


Inherited: yes
Percentages: yes (see below)
Media: visual
Animatable: yes (non-additive)

Using just the stroke-dasharray we can create the following types of dot-dash patterns along
the stroke of our shapes.

Figure 2-9. Stroke-dasharray property (dot, dash, dashdot, etc.)

<line x1="40" y1="20" x2="200" y2="20"
stroke-dasharray="1 10" fill="none"
stroke="darkslategray" stroke-width="2" stroke-linecap="round" />
<line x1="40" y1="40" x2="200" y2="40"
stroke-dasharray="10 10 10 10" fill="none"
<line x1="40" y1="60" x2="200" y2="60"
stroke-dasharray="10 10 1 10" fill="none"
<line x1="40" y1="80" x2="200" y2="80"
stroke-dasharray="1 10 10 10 1 10" fill="none"
<line x1="40" y1="100" x2="200" y2="100"
stroke-dasharray="1 10 10 10 10 10" fill="none"
</svg>

Note: When using lines in the Adobe SVG Viewer you will notice that you should always set
the fill=”none” to prevent a thin line from being displayed along the length of the line.

stroke-dashoffset

Value: <length> | inherit
Initial: 0
Inherited: yes
Percentages: see prose
Media: visual
12


Animatable: yes

The stroke-dashoffset can be used to effectively move the start position of the ‘stroke-
dasharray’. The ‘stroke-dasharray’ property also allows the stroke to be segmented as shown
in this example.

Figure 2-10. Stroke-dasharray and stroke-dashoffset design

fill="pink" stroke="blue" stroke-width="5"
stroke-dasharray="35 35" stroke-dashoffset="-17.5"/>
<line x1="90" y1="45" x2="215" y2="45"
stroke-width="10" stroke="black"
stroke-dasharray="2 13"/>
<line x1="120" y1="80" x2="215" y2="45"
stroke-dasharray="1 10 5 10"/>
<line x1="120" y1="10" x2="215" y2="45"
stroke-dasharray="1 10 5 10"/>
</svg>

In the example above the stroke-dashes on the rectangle have been offset using the ‘stroke-
dashoffset’ property so that they are centered along the length of rectangle’s sides.
Using the ‘stroke-dasharray’ property on two line elements we can even create a grid like this.

Figure 2-11. Grid using stroke-dasharray
<line x1="0" y1="50" x2="100" y2="50"
stroke-dasharray="2 18" />
<line x1="50" y1="0" x2="50" y2="100"
stroke-dasharray="2 18" />
</svg>

13


The ‘stroke-dashoffset’ property is illustrated more clearly in this next example.

Figure 2-12. Stroke-dashoffset property

stroke="black" stroke-width="0.75"
stroke-dasharray="10 10 10 10" stroke-dashoffset="0"
fill="silver" fill-opacity="0.4" />
stroke-dasharray="10 10 10 10" stroke-dashoffset="-10"
fill="silver" fill-opacity="0.4"/>
<rect x="40" y="70" width="140" height="20" rx="5" ry="5"
stroke="darkslategray" stroke-width="2"
</svg>

Both the ‘stroke-dasharray’ and the ‘stroke-dashoffset’ properties are quite useful for designs
and animations, as we will see later in this book.

stroke-linecap

Value: butt | round | square | inherit
Initial: butt
Inherited: yes

14

Percentages: N/A
Media: visual
Animatable: yes

The default ‘stroke-linecap’ property value is ‘butt’ specifies the shape to be used at the end
of open path. Setting the stroke-linecap value to ‘round’ creates a small semi-circle at the end
of the line. The last possible value for the stroke-linecap property is ‘square’ and this extends
the stroke out from the end of the line a distance equal to the ‘stroke-width’ property value.

Figure 2-13. Stroke-linecap property

<svg>

<line x1="20" y1="20" x2="20" y2="120"
fill="black" stroke="indigo" stroke-width="20"
stroke-linecap="butt" />

<line x1="60" y1="20" x2="60" y2="120"
stroke-linecap="round" />

<line x1="100" y1="20" x2="100" y2="120"
stroke-linecap="square" />

<line x1="0" y1="20" x2="120" y2="20"
fill="black" stroke="black" stroke-width="2"/>
<line x1="0" y1="120" x2="120" y2="120"
fill="black" stroke="black" stroke-width="2"/>
</svg>

stroke-linejoin

Value: miter | round | bevel | inherit
Initial: Miter
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

15


The default ‘stroke-linejoin’ property value is ‘miter’ which is just a normal “boxed edge”.
SVG also offers a ‘stroke-linejoin’ value of ‘round’ and ‘bevel’ as demonstrated in this
example.

Figure 2-14. Stroke-linejoin property

fill="magenta" stroke="black" stroke-width="10"
stroke-linejoin="round" />
fill="maroon" stroke="black" stroke-width="15"
stroke-linejoin="bevel" />
fill="gray" stroke="black" stroke-width="10"
stroke-linejoin="miter" />
</svg>

We will dig into style in greater depth in Chapter 5. For now let’s move on to SVG Basic
Shape elements.

Basic Shapes

Wherever we live on this planet our environments contain an infinite number of shapes.
Some examples include natural things such as trees, fruits and clouds and also man-made
things like symbols, clothes or computers. SVG allows us to easily model our world using six
predefined intuitive shape elements.

The basic shape elements are:
rect
circle
ellipse
line
polyline
polygon
Each SVG shape has specific attributes that define the dimensions of the shape.

For example, this image was created using two ‘rect’ elements.

16


Figure 2-15. Basic shapes

fill="none" stroke="blue" />
fill="none" stroke="red" />
</svg>

Let's cover each of the shape objects in detail.

Lines

The ‘line’ element in SVG takes four geometric attributes:

(x1, y1, x2, y2)

These four geometric attributes define the ‘lines’ elements start-point and end-point vertices.
This is how a line appears in an SVG viewer.

Figure 2-16. Line element diagram

<line x1="30" y1="80" x2="160" y2="20"
</svg>

17


The first lines start-point begins 30 user units from the left and 80 user units from the top of
the SVG document. The end-point is 160 user units from the left and 20 user units from the
top.

This is the syntax for the ‘line’ element

<line id="name"
x1="coordinate"
y1="coordinate"
x2="coordinate"
y2="coordinate"
style-attribute="style-value"/>

That being said, all of these attributes are actually optional for the line element.

Figure 2-17. Special cases for the line element

<line x1="0" y1="0" x2="0" y2="0"
<line x2="160" y2="20"
</svg>

If either attribute pair is not specified then the values for those attributes are automatically
rendered as if they were equal to zero. Likewise, as you can see in the example above, if the
x1, y1 and x2, y2 value pairs are the same or if they are not specified then the line will not
display.

Line Element Designs

Here are some useful techniques for creating fascinating designs with only one or two ‘line’
elements.

18

Figure 2-18. Amazing shapes with the line element

<svg width="800" height="600" viewBox="0 0 400 300">
<defs>
<pattern id="gridPattern" x="0" y="0" width="10" height="10"
patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray"
stroke-width="0.25"/>
</pattern>
</defs>
<rect id="grid" width="350" height="211" stroke="gray" stroke-width="0.1"
fill="url(#gridPattern)" />


<line x1="10" y1="30" x2="152" y2="30" stroke="darkslategray"
stroke-width="40" stroke-dasharray="2 18"
fill="none" />

stroke-width="20" stroke-opacity="0.5"
stroke-dasharray="20 20" fill="none" />

stroke-width="40" stroke-linecap="round"
fill="none" />

stroke-linecap="round" fill="none" />


19


stroke-width="40"
stroke-dasharray="1 1 1 1 1 2 2 2 2 1 1 1 4 1 1 2 2 2 1 1 1 1 1 1 1 1 2
3 1 1 2 1 3 1 1 3 1 2 1 2 1 1"
fill="none" />

<text x="75" y="200" font-size="8" text-anchor="middle">single lines</text>

fill="none" />
fill="none" />

stroke-dasharray="20 20" fill="none" />
<line x1="180" y1="70" x2="320" y2="70" stroke="silver"
stroke-dasharray="20 20" stroke-dashoffset="20" fill="none" />


<text x="250" y="200" font-size="8" text-anchor="middle">two lines
each</text>

</svg>

Circles

The circle element takes three geometric attributes: ‘cx’, ‘cy’, and ‘r’)
The ‘cx’ and ‘cy’ values specify the location of the middle of the circle while the ‘r’ value
specifies the radius of the circle.
For example if you want to create a circle with a diameter of 80 user units then you need to
set the value of the ‘r’ attribute equal to 40 as in this example.

Figure 2-19. Circle element diagram

20

<circle cx="100" cy="50" r="40"
stroke="darkslategrey" stroke-width="2"
fill="grey" fill-opacity="0.4"/>
</svg>

This is the syntax for the ‘circle’ element.
<circle id="name"
cx="coordinate"
cy="coordinate"
r="length"

The ‘r’ attribute radii parameter is required for rendering the circle element in SVG. If the
‘cx’ and ‘cy’ attributes are not specified then the circles center point is assumed to be (0, 0).
However, if the ‘r’ attribute is not specified or is set equal to zero then the circle will not
appear in the image as shown in this example.

Figure 2-20. Circle designs



<circle r="0"
fill="black" stroke="black"/>
<circle cx="10" cy="10" r="3"
fill="black" stroke="black"/>
<circle cx="30" cy="10" r="5" fill="black" stroke="red"
stroke-width="2"/>
<circle cx="50" cy="10" r="7" fill="black" stroke="red"
stroke-width="2"/>


<circle cx="0" cy="50" r="20"
fill="orange" stroke="black" stroke-width="3" />
<circle cx="70" cy="50" r="30" fill="grey" stroke="black"
stroke-width="3" />
<circle cx="120" cy="50" r="40" fill="grey" fill-opacity="0.5"
<circle cx="200" cy="50" r="50" fill="grey" fill-opacity="0.3"
</svg>

The ‘circle’ element can be used as the basis for buttons, wheels, gears, bubbles, people or
even planets as we’ll see later in this book.

Circle Element Designs

21


Here are some useful techniques for creating fascinating designs using only one or two
‘circle’ elements.

Figure 2-21. Amazing shapes with the circle element

There is nothing up my sleeves. See the code for yourself!
<defs>
</pattern>
</defs>
fill="url(#gridPattern)" />

<circle cx="40" cy="40" r="20" stroke="darkslategray" stroke-width="20"
stroke-opacity="0.5" fill="lightslategray" fill-opacity="0.5" />

stroke-dasharray="1.75 8.72" fill="lightslategray"
fill-opacity="0.5" />

stroke-dasharray="15.708 15.708" stroke-dashoffset="7.854"
fill="lightslategray" fill-opacity="0.5"/>

fill="lightslategray" fill-opacity="0.5"/>

22


stroke-dasharray="31.416 31.416" stroke-dashoffset="-15.708"
fill="none" />

stroke-dasharray="62.832 100" stroke-dashoffset="-41.888"
fill="none" stroke-linecap="round" />

<text x="75" y="200" font-size="8" text-anchor="middle">single circle
each</text>



<circle cx="310" cy="40" r="20"
stroke="darkslategray" stroke-width="10" stroke-dasharray="1.75 8.72"
fill="lightslategray" fill-opacity="0.5" />

stroke-dasharray="0.875 14.833 0.875 100" fill="none" />

fill="none" />

stroke-dasharray="0.524 2.094" fill="none" />

stroke-dasharray="15.708 15.708"
stroke-dashoffset="7.854" fill="none" />
<circle cx="310" cy="100" r="10" stroke="lightslategray" stroke-width="20"
fill="none" />

stroke-opacity="0.5" fill="lightslategray" />
stroke-opacity="0.5" fill="none" />

fill="none" />

<text x="275" y="200" font-size="8" text-anchor="middle">two concentric
circles each</text>

</svg>

Rectangles

23


Rectangles take four geometric attributes:

(x, y, width, height)

The ‘x’ (distance from the left) and ‘y’ (distance from the top) attributes define the position of
the top-left corner of the rectangle while the ‘width’ and ‘height’ attributes define the breadth
and girth of this two dimensional object.

Figure 2-22. Rectangle element diagram

stroke="black" stroke-width="0.75" stroke-dasharray="6 3 2 3"
fill="none" />
fill="lightgray" fill-opacity="0.4" />
</svg>

This is the syntax of the ‘rect’ element.

<rect id="name"
x="coordinate"
y="coordinate"
width="length"
height="length"

When no coordinates are specified the element's top left corner aligns with the image area's
top left corner. The ‘rx’ and ‘ry’ geometric attributes are optional but they can be used define
the distance that should be "rounded off" from each of the four corner edge's of the rectangle
in the horizontal (rx) and vertical (ry) directions. For example take a look at this next SVG
image.

24

Figure 2-23. Rectangle element designs



fill="lightgrey" stroke="black" stroke-width="1"/>
fill="white" stroke="none"/>


<rect x="50" y="45" width="100" height="50" rx="10"
fill="none" stroke="black" stroke-width="2"/>


fill="peachpuff" stroke="forestgreen" stroke-width="2"/>
</svg>

Also worth noting is that if only the ‘rx’ attribute or if only the ry attribute if specified then
the svg viewer will assume that both the ‘rx’ and ‘ry’ attribute value are the same. That is, if
‘rx’ is set to 5 user units but ‘ry’ is not specified then both ‘rx’ and ‘ry’ will be equal to 5 user
units. This is demonstrated in the rectangle element that is horizontal in the example above.

25


Ellipses

The ‘ellipse’ element takes four geometric attributes: ‘cx’, ‘cy’, ‘rx’ and ‘ry’.

Figure 2-24. Ellipse element diagram

<ellipse cx="110" cy="55" rx="70" ry="35"
</svg>

As the example above clearly defines, the ‘cx’ and ‘cy’ values specify the center position of
the ellipse while the ‘rx’ and ‘ry’ values specify the x-axis and y-axis radius of the ellipse
element.
Here is the syntax for the ‘ellipse’ element.
<ellipse id="name"
cx="coordinate"
cy="coordinate"
rx="length"
rx="length"

If you want to create a circle with an x-axis diameter of 70 user units then you need to set the
value of the ‘rx’ attribute equal to 35 as in this next example.

Figure 2-25. Ellipse element designs

26

<ellipse cx="70" cy="50" rx="50" ry="20" fill="yellow" stroke="black"
stroke-width="4"/>

<ellipse cx="180" cy="90" rx="35" ry="60" fill="powderblue" stroke="black"
stroke-width="4"/>
<ellipse cx="180" cy="110" rx="35" ry="60" fill="powderblue" stroke="black"
stroke-width="4"/>
<ellipse cx="180" cy="100" rx="55" ry="60" fill="white" stroke="black"/>

<ellipse cx="70" cy="80" rx="20" ry="20" fill="yellow" fill-opacity="0.4"

<ellipse cx="70" cy="150" rx="25" ry="0" fill="yellow" stroke="black"
stroke-width="4"/>
</svg>

The ‘rx’ and ‘ry’ attributes radii attribute are both required for rendering the ellipse element in
SVG. However, if either of these values is set equal to 0 then the ellipse and ends up looking
like a line as shown here.

Figure 2-26. Special cases for the ellipse element

<ellipse cx="110" cy="55" rx="70" ry="0"

As you can see the horizontal length has been set to zero so the ellipse ends up collapsing
upon itself and therefore renders as if it were a line.

Polygons and Polylines

The polyline and polygon ‘points’ attribute allows for multiple numbers of (x,y) coordinate
pairs. Lets take a look at the example to see what this means.

Figure 2-27. Polygon element diagram

<polygon fill="silver" stroke="black" stroke-width="2"
points="50,100 50,80 120,50 150,20 200,80 200,100" />

27

</svg>

Note to reader
Make sure you specify an even number of coordinate values. That is, for every x that you
specify be sure to define a corresponding y coordinate. Normally your SVG authoring
environment will handle this for you.

Polygons

Polygons can be used to quickly create a wide variety of shapes as shown here.

Figure 2-28. Polygon element designs


<polygon points="175,10 100,60 250,60" fill="darkblue"/>

<polygon points="73,34 90,50 80,85 40,50" fill="green" stroke-width="1"/>

<polygon points="150,80 200,80 220,110, 130,110" fill="white" stroke="black"
stroke-width="2"/>

<polygon points="47,108 22,133 22,166 47,184 85,184 108,166 108,133 85,108"
fill="darkred" stroke-width="1"/>

<polygon points="150,120 200,120 130,180, 220,180" fill="pink" stroke="black"
stroke-width="2"/>
<polygon points="265,180 300,5 265,5 300,180"
stroke="black" stroke-width="2" fill="lightgrey" />
</svg>

The syntax of the ‘polygon’ element is pretty simple.
<polygon id="name"
points="coordinates"

Polygon Element Designs

Here are some useful techniques for creating fascinating designs with only one or two
‘polygon’ elements.

28

Figure 2-29. Amazing shapes with the polygon element

<defs>
</pattern>
</defs>
fill="url(#gridPattern)" /> 

<polygon points="20,50 60,50 40,15.36" stroke="darkslategray"
stroke-width="15" stroke-opacity="0.5" fill="lightslategray"
fill-opacity="0.5" stroke-linejoin="round" />

stroke-width="5" stroke-dasharray="20 20" stroke-dashoffset="10"
fill="lightslategray" stroke-linejoin="round" />

fill="none" stroke-linejoin="round" stroke-linecap="round" />

stroke-width="12" stroke-dasharray="20 20" stroke-dashoffset="-10"


29


stroke-width="23" stroke-opacity="0.5" stroke-dasharray="20 20"
stroke-dashoffset="-10" fill="none" stroke-linecap="round" />

stroke-width="15" stroke-dasharray="40 40 1 40"
fill="lightslategray" stroke-linecap="round" />

<text x="75" y="200" font-size="8" text-anchor="middle">single triangle
each</text>


<polygon points="220,26.9 260,26.9 240,61.54" stroke="darkslategray"

fill="lightslategray" fill-opacity="0.5" stroke-linecap="round"
fill="lightslategray" fill-opacity="0.5" stroke-linecap="round"

stroke-width="5" stroke-dasharray="0.1 17 6 17"
stroke-dashoffset="0" fill="lightslategray" fill-opacity="0.5"
stroke-linecap="round" stroke-linejoin="round" />
stroke-width="5" stroke-dasharray="0.1 17 6 17"
stroke-dashoffset="0" fill="lightslategray" fill-opacity="0.5"
stroke-linecap="round" stroke-linejoin="round" />

<text x="240" y="200" font-size="8" text-anchor="middle">two triangles
each</text>

</svg>

30

Learn svg

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Learn svg

Similar to Learn svg (20)

More from FitBlar Mit

More from FitBlar Mit (20)

Recently uploaded

Recently uploaded (20)

Learn svg