• 2020-08-14

    Style tag inside SVG

    Author

    Comments

    Start a discussion

    To style an SVG file from within with CSS is possible. Just add a style tag, just like with HTML.

    <svg class="success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48">
    
    <style>
      .success path {
        fill: green;
      }
      .success path:nth-child(2) {
        fill: #fff;
      }
    </style>
    
    <path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>

    Sources