HTML and CSS Reference
In-Depth Information
It seems like a path can do anything, so why bother to use anything
else? The
<path>
element is difficult to understand and manipulate
because of its reliance on a single attribute value. In addition, any style
will apply to all shapes on the same path, so all your shapes will have
the same border and color. Of course, nothing is stopping you from
using more than one path with a different style applied to each.
Images, text, and embedded content
Images are easy to embed within your
SVG
drawing. The syntax is sim-
ilar to that of
HTML
, and the only additional information you need to
provide over and above the
<image>
element are the coordinates of the
upper-left corner:
<image x="10" y="10"
width="236" height="260"
xlink:href="example.png">
</image>
You use an
xlink:href
to link to the image. The
xlink
is a namespace, a
legacy of
SVG
's
XML
heritage that leaks through to
HTML5
; more on
that shortly. Text is handled a little differently in
SVG
compared to
HTML
. In
HTML
, any text within the body is rendered to the screen—
no special wrapping is required. In
SVG
, text has to be explicitly
wrapped within a containing element:
<text x="10" y="20">
HAI! IZ IN YR ELEMENT WRITIN
YR TXT
</text>
<text x="10" y="60">
HAI
CAN HAS STDIO?
VISIBLE "HAI WORLD!"
KTHXBYE
</text>
