HTML and CSS Reference
In-Depth Information
Syntax
The root element of both embedded and inline SVG images is
svg
. Listing 3-51 shows an example.
Listing 3-51.
The
svg
Root Element
<svg
xmlns=
"
http://www.w3.org/2000/svg
">
<rect x=
"
10
"
y=
"
10
"
rx=
"
0
"
ry=
"
0
"
width=
"
80
"
height=
"
80
"
fill=
"
#898989
"
/>
</svg>
The namespace prefix can also be specified on the
xmlns
attribute. Doing so, the corresponding namespace is
not the default namespace. Consequently, an explicit namespace prefix must be assigned to all elements such as in
Listing 3-52.
Listing 3-52.
Explicit Namespace Prefix
<
svg:svg xmlns:svg
=
"
http://www.w3.org/2000/svg
"
>
<
svg:rect
x=
"
10
"
y=
"
10
"
rx=
"
0
"
ry=
"
0
"
width=
"
80
"
height=
"
80
"
fill=
"
#898989
"
/>
<
/svg:svg
>
Both examples draw a rectangle using the
rect
element with a top-left positioning (
x
,
y
), dimensions (
width
,
height
),
and optional horizontal and vertical corner radii (
rx
,
ry
). If length units are omitted, they are assumed to be in pixels.
The default fill color for such objects is black, which can be overridden by the
fill
attribute.
Other geometrical shapes can be drawn in SVG similarly. Circles, for example, can be declared by a horizontal
and vertical center and a radius (Listing 3-53).
Listing 3-53.
A Circle in SVG
<circle cx="100" cy="100" r="90" stroke="#666" fill="#fff" />
For ellipses, a horizontal and a vertical center, as well as a horizontal and a vertical radius, are required
(Listing 3-54).
Listing 3-54.
An Ellipsis in SVG
<ellipse cx="100" cy="100" rx="120" ry="80" fill="blue" />
The
svg
element can contain any of the following elements, in any order [57]: animation elements (
animate
,
animateColor
,
animateMotion
,
animateTransform
,
set
), descriptive elements (
desc
,
metadata
,
title
), shape
elements (
circle
,
ellipse
,
line
,
path
,
polygon
,
polyline
,
rect
), structural elements (
defs
,
g
,
svg
,
symbol
,
use
),
gradient elements (
linearGradient
,
radialGradient
),
a
,
altGlyphDef
,
clipPath
,
color-profile
,
cursor
,
filter
,
font
,
font-face
,
foreignObject
,
image
,
marker
,
mask
,
pattern
,
script
,
style
,
switch
,
text
, and
view
.
Embedding
SVG images can be embedded in the markup by using the
img
or
object
element or by writing the SVG code directly
into the markup (
inline SVG
).
The first approach applies the markup element
img
, which is used for other images such as JPEG or PNG
(Listing 3-55).
Listing 3-55.
Embedding SVG with the
img
Element
<img src="images/cover.svg" width="400" height="300" alt="Book cover" />
Search WWH ::
Custom Search