Why Color SVG Elements?

Coloring your SVG graphics is key to making your designs visually appealing and seamlessly integrated into your web projects. In our previous tutorials, you learned how to create primitive shapes like rectangles and circles, complex shapes with path, and insert images and videos into an SVG stage. I also showed you how to move these elements and save them for web use (read more here). Now, it is time to bring them to life with colors, outlines, and transparencies.

SVG elements have attributes such as fill (fill color), stroke (outline color), stroke-width (outline thickness), and opacity (transparency). Additionally, SVGs allow including CSS styles and JavaScript scripts inside the <svg> tag, creating dynamic and self-contained graphics. In this guide, we will explore how to color SVGs using attributes, CSS, JavaScript, and visual tools like creadorlogos.com. Read on!

An alternative to color SVG graphics is using professional software like Adobe Illustrator or Inkscape. These programs allow modifying colors and saving the file with the .svg extension. However, they can add metadata that increases file size, and mastering these tools requires practice. Therefore, we focus on more accessible methods below.

Using fill, stroke, stroke-width, and opacity attributes

The most direct way to color SVG elements is to modify their attributes directly in the code. You can open your SVG file in a text editor (like Visual Studio Code or Notepad++) and adjust the properties of each element. The key attributes are:

• fill: Defines the fill color of the element.
• stroke: Defines the outline color.
• stroke-width: Sets the outline thickness.
• opacity: Controls transparency (from 0 to 1).

If an element does not have these attributes defined, you can add them directly, and the browser will render them correctly.

Example Code

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue" stroke="yellow" stroke-width="5" opacity="0.8" />
  <rect x="100" y="100" width="50" height="50" fill="red" stroke="black" stroke-width="3" opacity="0.6" />
  <path d="M 10 150 L 60 100 L 110 150" fill="green" stroke="purple" stroke-width="2" opacity="0.9" />
</svg>

Visual Example

How to apply these attributes?

Add or modify the fill, stroke, stroke-width, and opacity attributes in the SVG element tag. For example, changing fill="blue" to fill="#FF5733" alters the fill color.

✅ Advantages:

• Direct and precise control over colors.
• Does not require external tools or advanced knowledge.

❌ Disadvantages:

• Tedious for multiple elements or frequent changes.
• Does not allow dynamic animations or interactions.

Prefer to avoid code? Try coloring your SVGs visually at creadorlogos.com.

Coloring SVG Elements with CSS

You can use CSS to color SVG elements in two ways: applying styles from an external/embedded stylesheet or using the style property directly on the element tag (inline). The CSS properties fill, stroke, stroke-width, and opacity are equivalent to SVG attributes, but managed with CSS syntax.

Precedence Note: Inline styles (style) have higher priority than SVG attributes like fill. Styles in an external or embedded stylesheet (<style>) will only override inline style if they have higher specificity or use !important.

External or Embedded CSS

Use an external stylesheet or a <style> tag inside the SVG to apply colors to elements identified by their id or class. This method is ideal for keeping styles organized.

Example Code

<style>
  #miCirculo {
    fill: orange;
    stroke: black;
    stroke-width: 4;
    opacity: 0.7;
  }
  .miClase {
    fill: green;
    stroke: blue;
    stroke-width: 2;
    opacity: 0.9;
  }
</style>

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle id="miCirculo" cx="50" cy="50" r="40" />
  <rect class="miClase" x="100" y="100" width="50" height="50" />
</svg>

Visual Example

Inline CSS with style

The style property allows applying CSS styles directly on the SVG element tag. It is useful for quick changes, but mixes presentation with structure, which can make maintenance difficult.

Example Code

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" style="fill: purple; stroke: yellow; stroke-width: 4; opacity: 0.8;" />
  <rect x="100" y="100" width="50" height="50" style="fill: teal; stroke: black; stroke-width: 2; opacity: 0.6;" />
</svg>

Visual Example

How to color with CSS?

Use external/embedded CSS for organized projects or the style property for quick changes. CSS is ideal for keeping styles separate, but inline style takes precedence.

✅ Advantages:

• External/Embedded: Separation of styles and structure.
• Inline: Fast for specific changes.
• Compatible with CSS transitions and animations.

❌ Disadvantages:

• External/Embedded: Does not work with SVGs loaded as external images.
• Inline: Mixes presentation with structure.
• Less integration with native SVG attributes.

Prefer to avoid code? Try coloring your SVGs visually at creadorlogos.com.

Coloring SVG Elements with JavaScript

JavaScript allows dynamically changing the colors of an SVG element by accessing it via its id or class. You can modify SVG attributes with setAttribute() or CSS styles with element.style.property. The style method applies inline styles with higher precedence.

Example Code (using setAttribute)

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle id="miCirculoJS" cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="3" />
</svg>
<script>
  let circulo = document.getElementById("miCirculoJS");
  circulo.setAttribute("fill", "purple");
  circulo.setAttribute("stroke", "yellow");
  circulo.setAttribute("stroke-width", "5");
  circulo.setAttribute("opacity", "0.8");
</script>

Visual Example (setAttribute)

Example Code (using style)

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="miRectJS" x="100" y="100" width="50" height="50" fill="red" stroke="black" stroke-width="3" />
</svg>
<script>
  let rect = document.getElementById("miRectJS");
  rect.style.fill = "teal";
  rect.style.stroke = "orange";
  rect.style.strokeWidth = "4";
  rect.style.opacity = "0.7";
</script>

Visual Example (style)

How to color with JavaScript?

Use setAttribute() to modify SVG attributes or element.style.property for inline styles. The style property is ideal for dynamic changes in response to events.

✅ Advantages:

• Allows real-time dynamic changes.
• Ideal for event-driven interactions.
• style has high priority in the CSS cascade.

❌ Disadvantages:

• Requires basic JavaScript knowledge.
• Can be slower for complex animations.
• Using inline style can complicate maintenance.

Prefer to avoid code? Try coloring your SVGs visually at creadorlogos.com.

SVG with Embedded CSS and JavaScript

SVG files can include CSS and JavaScript inside the <svg> tag, allowing the creation of dynamic and self-contained graphics saved with the .svg extension. This method is ideal for projects that do not require separate HTML files. Note: embedded JavaScript may be blocked by some programs if the file comes from an untrusted source.

Example Code

<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    text {
      font-size: 60px;
      font-family: Arial, sans-serif;
      fill: blue;
      stroke: black;
      stroke-width: 2px;
      animation: colorChange 6s infinite;
    }
    @keyframes colorChange {
      0%   { fill: blue; }
      20%  { fill: purple; }
      40%  { fill: red; }
      60%  { fill: yellow; }
      80%  { fill: green; }
      100% { fill: pink; }
    }
  </style>
  <text id="animatedText" x="50" y="100">Hello World</text>
  <script type="application/ecmascript"><![CDATA[
    const phrases = ["Thanks", "Keep learning", "SVG in this", "Tutorials"];
    let i = 0;
    setInterval(() => {
      const text = document.getElementById("animatedText");
      text.textContent = phrases[i % phrases.length];
      i++;
    }, 1500);
  ]]></script>
</svg>

Visual Example

✅ Advantages:

• Self-contained SVG file, no external HTML needed.
• Ideal for dynamic graphics with animations.

❌ Disadvantages:

• Embedded JavaScript may be blocked by browsers or security software.
• Less common in workflows separating code and styles.

Prefer to avoid code? Try coloring your SVGs visually at creadorlogos.com.

Easily Color SVG Elements in creadorlogos.com

Editing colors through code or complex software can slow down your projects. At creadorlogos.com you have an intuitive visual editor to customize every path immediately.

1. Select your shape or icon

Click directly on the element or text in the workspace to select it isolated or within its vector group.

2. Use the color palette and fill panel

Instantly modify the fill (fill) and outline (stroke) by selecting colors from the interactive palette or entering precise HEX codes.

3. Adjust opacities and effects

Slide opacity or stroke thickness controls in real time to achieve perfect transparency effects without touching a single line of code.

When finished, you can download your design ready for web and print in optimized SVG format or PNG with a transparent background.

Rendering Order and Transparencies

In SVG, elements are drawn in the order they appear within the code (the first is drawn in the background and subsequent ones stack on top). When combining colors with transparencies (opacity), the order in which you place the tags will directly affect the final visual result, as colors overlap.

If you need to change which element appears in front of another, simply rearrange the lines of code or use the layers of the visual editor at creadorlogos.com.

Mastering color in SVG gives you total creative control for your logos, icons, and web developments. Keep exploring our tutorials!