svg representation

5.1 Document presentation - styles and attributes

You can apply: inline styles, internal styles, external styles, presentation attribiutes

5.1.1 Inline styles

<svg width="100" height="100">
    <circle cx="20" cy="30" r="10" style="stroke:black; stroke-width:1.5; fill: blue; fill-opacity:0.6"/>
</svg>

5.1.2 Internal stylesheet

In html the internal style for one svg will affect all svg images in this html file.
To avoid this you can create a class, like below.

 <svg width="100" height="100" class="internal-style-example">
           <defs>
                  <style type="text/css">
                      .internal-style-example circle {
                      fill:#ffc;
                      stroke:blue;
                      stroke-width:2;
                      stroke-dasharray:5 3;
                      }
                  </style>
             </defs>

            <circle cx="20" cy="20" r="10"/>
            <circle cx="60" cy="20" r="15"/>
            <circle cx="20" cy="60" r="10" style="fill:#cfc;"/>
            <circle cx="60" cy="60" r="15" style="stroke-width:1; stroke-dasharray:none"/>
          </svg>

5.1.3 External stylesheet

You can use it only for standalone file.svg. For example:

Image

Note from Cloude Opus 4.5
Linking the image with <img> tags
don't allow SVG files to load external
stylesheets for security reasons.
You have to change the link
<img src="5_1_3_file.svg" alt="5_1_3_file.svg" class="border">
to
<object type="image/svg+xml" data="5_1_3_file.svg" class="border" width="200" height="200">5_1_3_file.svg </object>
The <object> tag allows the SVG
to load its external CSS stylesheet.

Standalone file 5_1_3_file.svg

<?xml version="1.0"?>
  <?xml-stylesheet href="5_1_3_ext_style.css" type="text/css"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  <svg xmlns="http://www.w3.org/2000/svg"
    width="200px" height="200px" viewBox="0 0 200 200"
    preserveAspectRatio="xMinYMin meet">
    <line x1="10" y1="10" x2="40" y2="10"/>
    <rect x="10" y="20" width="40" height="30"/>
    <circle class="yellow" cx="70" cy="20" r="10"/>
    <polygon class="thick" points="60 50, 60 80, 90 80"/>
    <polygon class="thick semiblue"
        points="100 30, 150 30, 150 50, 130 50"/>
  </svg>

External stylesheet file 5_1_3_file.svg

* {
    fill:none; stroke:black
  } /* default for all elements */
rect {
    stroke-dasharray:7 3;
    }
circle.yellow {
    fill:yellow;
    }
.thick {
      stroke-width:5;
        }
.semiblue
        {
      fill:blue; fill-opacity:0.5;
        }

5.1.4 Attributes

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="30"
          fill="red" stroke="black" stroke-width="2"/>
</svg>

Note:
Any style specification coming from an inline, internal, or external stylesheet will override a presentation attribute.
In the following SVG document, the circle will be filled in red, not green.

<svg width="100" height="100">
    <defs>
      <style type="text/css">
          circle { fill: red; }
      </style>
    </defs>
    <circle cx="20" cy="20" r="15" fill="green"/>
</svg>