HTML and CSS Reference
In-Depth Information
Look what happens if you use these val-
ues:
viewBox="0 0 640 480"
. It's the same
SVG
graphic as before, but rendered into
a larger viewport.
Applying styles to SVG
The previous examples used an inline
style to apply colors and stroke thick-
nesses. Those properties can also be applied directly to the elements in
question, like this:
<rect x="50" y="50" width="100" height="100"
fill="rgb(255,0,0)"></rect>
<line x1="50" y1="50" x2="150" y2="150"
stroke="rgb(0,127,127)" stroke-width="5"></line>
But you can alternatively leave off the style and inline attributes and
use this in your
CSS
file, and achieve the same results:
rect { fill: rgb(255,0,0); }
line { stroke: rgb(0,127,127); stroke-width: 5; }
It looks much like any other
CSS
,
albeit with some unusual properties.
As with regular
HTML
,
CSS
can
make life much easier if you have a
lot of similar objects because you can
use a class to apply a set of styles to
several elements.
In this example there are three green
squares (upper left, upper right,
lower left) and three blue squares. Rather than specify inline styles on
each one, you can declare their commonality with the
class
attribute:
<svg id="mysvg" viewBox="0 0 320 240">
<rect x="50" y="50" width="50" height="50" class="earth"></rect>
<rect x="150" y="50" width="50" height="50" class="water"></rect>
<rect x="250" y="50" width="50" height="50" class="earth"></rect>
<rect x="50" y="150" width="50" height="50" class="earth"></rect>
