¿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 en creadorlogos.com

Si no quieres trabajar con código, creadorlogos.com ofrece una forma visual y sencilla de colorear tus elementos SVG. Selecciona objetos y ajusta colores, contornos y transparencias sin programar.

Paso 1: Selecciona tu objeto

Haz clic en el elemento SVG o selecciónalo desde el panel lateral derecho, donde se listan todos los objetos de tu diseño.

Paso 2: Usa los controles de color

Ajusta el color de relleno, el color y grosor del contorno, y la opacidad desde una paleta o con códigos hexadecimales.

Paso 3: Ajusta el diseño final

Usa las flechas en el panel lateral para cambiar el orden de los elementos, ideal para transparencias y superposiciones. Descarga tu diseño como SVG o PNG.

¿Por qué usar creadorlogos.com?

Esta herramienta elimina la necesidad de programar, permitiéndote centrarte en el diseño. Es ideal para principiantes o diseñadores que buscan rapidez.

✅ Ventajas:

• No requiere conocimientos de programación.
• Interfaz visual intuitiva y rápida.
• Permite ajustes precisos y exportación en múltiples formatos.

❌ Desventajas:

• Menos control que editando código directamente.
• Dependes de la plataforma para funcionalidades avanzadas.

Orden de renderizado y transparencias en SVG

En SVG, los elementos se renderizan en el orden en que aparecen en el código: los primeros se dibujan en el fondo y los últimos en la parte superior. Esto afecta las transparencias, ya que un elemento con opacity menor a 1 permite ver los elementos debajo.

Controla el orden reorganizando las etiquetas en el código o, en creadorlogos.com, usando las flechas en el panel lateral. Este enfoque es útil para efectos visuales con transparencias.

Código de ejemplo

<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" opacity="0.5" />
  <rect x="80" y="80" width="60" height="60" fill="red" opacity="0.5" />
</svg>
                

Ejemplo visual

¿Cómo gestionar el orden de renderizado?

Asegúrate de que los elementos que deseas en el fondo aparezcan primero en el código. Usa transparencias con opacity para crear efectos visuales atractivos.

✅ Ventajas:

• Control total sobre la superposición de elementos.
• Ideal para efectos visuales con transparencias.

❌ Desventajas:

• Reorganizar elementos manualmente puede ser tedioso.
• Requiere planificación cuidadosa en diseños complejos.

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