HTML and CSS Reference
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
<image x="10" y="10"
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
<text x="10" y="60">
CAN HAS STDIO?
VISIBLE "HAI WORLD!"