¿Por qué colorear elementos SVG?

Dar color a tus gráficos SVG es clave para hacer que tus diseños sean visualmente atractivos y se integren perfectamente en tus proyectos web. En nuestros tutoriales anteriores, aprendiste a crear figuras primitivas como rectángulos y círculos, formas complejas con path, e insertar imágenes y videos en un escenario SVG. También te mostré cómo mover estos elementos y guardarlos para usarlos en una página web (lee más aquí). Ahora, es momento de darles vida con colores, contornos y transparencias.

Los elementos SVG tienen atributos como fill (color de relleno), stroke (color de contorno), stroke-width (grosor del contorno) y opacity (transparencia). Además, los SVGs permiten incluir estilos CSS y scripts JavaScript dentro de la etiqueta <svg>, creando gráficos dinámicos y autónomos. En esta guía, exploraremos cómo colorear SVGs usando atributos, CSS, JavaScript y herramientas visuales como creadorlogos.com. ¡Sigue leyendo!

Una opción para colorear gráficos SVG es usar software profesional como Adobe Illustrator o Inkscape. Estos programas permiten modificar colores y guardar el archivo con la extensión .svg. Sin embargo, pueden añadir metadatos que aumentan el tamaño del archivo, y dominar estas herramientas requiere práctica. Por eso, nos enfocamos en métodos más accesibles a continuación.

Usar atributos fill, stroke, stroke-width y opacity

La forma más directa de colorear elementos SVG es modificar sus atributos directamente en el código. Puedes abrir tu archivo SVG en un editor de texto (como Visual Studio Code o Notepad++) y ajustar las propiedades de cada elemento. Los atributos clave son:

• fill: Define el color de relleno del elemento.
• stroke: Define el color del contorno.
• stroke-width: Establece el grosor del contorno.
• opacity: Controla la transparencia (de 0 a 1).

Si un elemento no tiene estos atributos definidos, puedes añadirlos directamente, y el navegador los renderizará correctamente.

Código de ejemplo

<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>

Ejemplo visual

¿Cómo aplicar estos atributos?

Añade o modifica los atributos fill, stroke, stroke-width y opacity en la etiqueta del elemento SVG. Por ejemplo, cambiar fill="blue" a fill="#FF5733" altera el color de relleno.

✅ Ventajas:

• Control directo y preciso sobre los colores.
• No requiere herramientas externas ni conocimientos avanzados.

❌ Desventajas:

• Tedioso para múltiples elementos o cambios frecuentes.
• No permite animaciones dinámicas ni interacciones.

¿Prefieres evitar el código? Prueba a colorear tus SVGs de forma visual en creadorlogos.com.

Colorear elementos SVG con CSS

Puedes usar CSS para colorear elementos SVG de dos formas: aplicando estilos desde una hoja externa/embebida o usando la propiedad style directamente en la etiqueta del elemento (inline). Las propiedades CSS fill, stroke, stroke-width y opacity son equivalentes a los atributos SVG, pero se gestionan con la sintaxis de CSS.

Nota sobre precedencia: Los estilos inline (style) tienen mayor prioridad que los atributos SVG como fill. Los estilos en una hoja externa o embebida (<style>) solo anularán el style inline si tienen mayor especificidad o usan !important.

CSS externo o embebido

Usa una hoja de estilos externa o una etiqueta <style> dentro del SVG para aplicar colores a elementos identificados por su id o clase. Este método es ideal para mantener los estilos organizados.

Código de ejemplo

<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>

Ejemplo visual

CSS inline con style

La propiedad style permite aplicar estilos CSS directamente en la etiqueta del elemento SVG. Es útil para cambios rápidos, pero mezcla presentación con estructura, lo que puede dificultar el mantenimiento.

Código de ejemplo

<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>

Ejemplo visual

¿Cómo colorear con CSS?

Usa CSS externo/embebido para proyectos organizados o la propiedad style para cambios rápidos. CSS es ideal para mantener los estilos separados, pero el style inline tiene prioridad.

✅ Ventajas:

• Externo/embebido: Separación de estilos y estructura.
• Inline: Rápido para cambios puntuales.
• Compatible con transiciones y animaciones CSS.

❌ Desventajas:

• Externo/embebido: No funciona con SVGs cargados como imágenes externas.
• Inline: Mezcla presentación con estructura.
• Menos integración con atributos nativos de SVG.

¿Prefieres evitar el código? Prueba a colorear tus SVGs de forma visual en creadorlogos.com.

Colorear elementos SVG con JavaScript

JavaScript permite cambiar dinámicamente los colores de un elemento SVG accediendo a él por su id o clase. Puedes modificar atributos SVG con setAttribute() o estilos CSS con element.style.property. El método style aplica estilos inline con mayor precedencia.

Código de ejemplo (usando 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>

Ejemplo visual (setAttribute)

Código de ejemplo (usando 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>

Ejemplo visual (style)

¿Cómo colorear con JavaScript?

Usa setAttribute() para modificar atributos SVG o element.style.property para estilos inline. La propiedad style es ideal para cambios dinámicos en respuesta a eventos.

✅ Ventajas:

• Permite cambios dinámicos en tiempo real.
• Ideal para interacciones basadas en eventos.
• style tiene alta prioridad en la cascada CSS.

❌ Desventajas:

• Requiere conocimientos básicos de JavaScript.
• Puede ser más lento para animaciones complejas.
• El uso de style inline puede complicar el mantenimiento.

¿Prefieres evitar el código? Prueba a colorear tus SVGs de forma visual en creadorlogos.com.

SVG con CSS y JavaScript embebidos

Los archivos SVG pueden incluir CSS y JavaScript dentro de la etiqueta <svg>, permitiendo crear gráficos dinámicos y autónomos guardados con la extensión .svg. Este método es ideal para proyectos que no requieren archivos HTML separados. Nota: el JavaScript embebido puede ser bloqueado por algunos programas si el archivo proviene de una fuente no confiable.

Código de ejemplo

<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">Hola Mundo</text>
  <script type="application/ecmascript"><![CDATA[
    const frases = ["Gracias", "Sigue aprendiendo", "SVG en este", "Tutoriales"];
    let i = 0;
    setInterval(() => {
      const texto = document.getElementById("animatedText");
      texto.textContent = frases[i % frases.length];
      i++;
    }, 1500);
  ]]></script>
</svg>

Ejemplo visual

✅ Ventajas:

• Archivo SVG autónomo, sin necesidad de HTML externo.
• Ideal para gráficos dinámicos con animaciones.

❌ Desventajas:

• El JavaScript embebido puede ser bloqueado por navegadores o programas de seguridad.
• Menos común en flujos de trabajo que separan código y estilos.

¿Prefieres evitar el código? Prueba a colorear tus SVGs de forma visual en creadorlogos.com.

Colorear elementos SVG fácilmente en creadorlogos.com

Editar colores mediante código o software complejo puede demorar tus proyectos. En creadorlogos.com cuentas con un editor visual intuitivo para personalizar cada trazado de manera inmediata.

1. Selecciona tu figura o icono

Haz clic directamente sobre el elemento o texto en el área de trabajo para seleccionarlo de forma aislada o dentro de su grupo vectorial.

2. Usa la paleta de colores y el panel de relleno

Modifica instantáneamente el relleno (fill) y el contorno (stroke) seleccionando colores desde la paleta interactiva o ingresando códigos HEX precisos.

3. Ajusta opacidades y efectos

Desliza los controles de opacidad o grosor de trazo en tiempo real para lograr efectos de transparencia perfectos sin tocar una sola línea de código.

Al finalizar, puedes descargar tu diseño listo para web e impresión en formato SVG optimizado o PNG con fondo transparente.

Orden de renderizado y transparencias

En SVG, los elementos se dibujan en el orden en que aparecen dentro del código (el primero se dibuja al fondo y los siguientes se apilan por encima). Al combinar colores con transparencias (opacity), el orden en el que coloques las etiquetas afectará de forma directa al resultado visual final, ya que los colores se superpondrán.

Si necesitas cambiar qué elemento se muestra delante de otro, simplemente reorganiza las líneas de código o utiliza las capas del editor visual en creadorlogos.com.

Dominar el color en SVG te da un control creativo total para tus logotipos, iconos y desarrollos web. ¡Sigue explorando nuestros tutoriales!