SVG style Attribute

Last Updated : 31 Mar, 2022

The style attribute helps us to style an element using CSS declarations. It works very much similar to the style attribute of HTML. Almost all the elements are using this attribute.

Syntax:

style = "<style>"

Attribute values: The style attribute accepts the values mentioned above and described below.

style: The syntax of style data depends on the provided CSS.

Below examples illustrate the use of the style attribute.

Example 1:

HTML

<!DOCTYPE html>
<html>

    <body>
        
        <svg viewBox="-10 -5 1220 520" 
             xmlns="http://www.w3.org/2000/svg">
            <defs>
                <marker id="geek"
                    viewBox="0 0 10 10"
                    refX="1" refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="7"
                    markerHeight="7"
                    orient="auto">
                   <path d="M 0 0 L 10 5 L 0 10 z" 
                    fill="green"/>
                </marker>
            </defs>

            <polyline points="20, 20 40, 25 60,
                    40 80, 120 120, 140 200, 180"
                    style="fill:none;stroke:green;
                    stroke-width:3" 
                    marker-end="url(#geek)"/>
          </svg>
    </body>   
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

    <body>
        <svg viewbox="0 0 150 60" 
          xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10"
              style="fill: lightgreen; 
              stroke: green; 
              stroke-width: 2;"/>
        </svg>
    </body>
   
</html>

Output:

HTML Introduction

thacker_shahid

Improve

Article Tags :

SVG style Attribute

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?