Painting SVGs

Table of Contents

• Fill
• Stroke
• color-interpolation-filters
• <g>
• <defs>
• <style>
• Gradients
• Patterns

Fill

The default properties for an SVG element is a black (#000) fill with no stoke.

currentColor

Stroke

If a stroke width is added, the default color for a stroke is black (#000).

non-scaling-stroke

currentColor

color-interpolation-filters

<g>

The <g> element allows you to group elements together and apply attributes, styles, filters collectively.

<g fill="white" stroke="grey" stroke-width="7.5" transform="translate(0 20)">
          <rect x="175" y="25" width="50" height="50" />
          <rect x="250" y="25" width="50" height="50" />
          <rect x="325" y="25" width="50" height="50" />
        </g>

<defs>

<defs> should contain graphical objects to be defined for later reuse. SVG gradients, patterns, masks, markers, clip paths, and filters are a subject of their own presentation.

<defs>
          <style>
            .go {
              fill: green;
            }
          </style>
          <linearGradient id="Gradient01">
            <stop offset="20%" stop-color="#39F" />
            <stop offset="90%" stop-color="#F3F" />
          </linearGradient>
          <pattern id="stripe" width="10" height="10" patternUnits="userSpaceOnUse" stroke="white" fill="none" stroke-width="1">
            <path fill="white" d="M0,0L10,5L0,10" />
          </pattern>
          <mask id="lionMask" maskUnits="userSpaceOnUse" >
            <image href="/svg-zoo/assets/images/guides/lion_cracker.webp" x="55" y="15" width="200" height="200" viewBox="0 0 100 100" />
          </mask>
            <circle id="lionContainer" class="go" cx="75" cy="50" r="25" />
          <marker id="Triangle2" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto" stroke="none" fill="black" stroke-width="0">
            <path fill="white" d="M0,0L10,5L0,10z" />
          </marker>
          <clipPath id="myClip">
            <circle cx="420" cy="50" r="30" fill="green" />
          </clipPath>
          <symbol id="card" viewBox="0 0 100 100">
            <rect x="0" y="0" width="75" height="75" />
            <path d="M50 90 C -15 40, 10 5, 50 30 C 90 5, 110 40, 50 90z" fill="rgba(255,0,0,1)" />
          </symbol>
        </defs>
            

<style>

CSS is supported in the SVG code.

<style>
  .circle1 {
    fill: rgba(255, 0, 0, 0.3);
  }
  .go {
    fill: green;
  }
  @media only screen and (min-width: 400px) {
    .small { display: none; }
  }
  @media only screen and (max-width: 400px) {
    .medium { display: none; }
  }
</style>
            

Media queries continue to work within linked SVGs based on the width of the image container. In the image below, the image will change when its width is 400 pixels or larger.

Gradients

Patterns

Markers

Masks

Clip-paths