HTML and CSS Reference
You're probably thinking it looks familiar, and you're right. Many of
the things that can be achieved with <canvas> can also be easily
achieved with SVG . You'll learn more about the relative strengths and
weaknesses of each in the section “ SVG vs. <canvas>,” but for now all
you need to understand is that <canvas> and SVG are based on different
conceptual models of how to create images. <canvas> is what program-
mers call imperative ; you provide a detailed list of operations to be per-
formed that will produce a particular result. SVG is declarative ; you
provide a description of the final result and let the browser get on with
like HTML , and it can be included directly in HTML5 :
<title>SVG example 2</title>
<svg id="mysvg" viewBox="0 0 320 240"
style="outline: 1px solid #999; width: 320px; height:
<rect x="50" y="50" width="100" height="100"
<line x1="50" y1="50" x2="150" y2="150"
style="stroke: rgb(0,127,127); stroke-width: 5;">
There are several interesting things to be seen in this simple example.
First, note that the size of the element on the page is determined by
CSS in the style attribute, but you also define a viewBox with the same
values. Because SVG is a vector format, pixels aren't as significant; you
can use viewBox to define a mapping between the physical dimensions of
the element, defined in CSS , and the logical coordinates of everything