Tutorial WordPress: Hacer que imágenes SVG cambien de color con CSS fill actualColor

Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo conseguir que las imágenes SVG cambien de color mediante CSS usando fill: currentColor (o técnicas equivalentes) dentro de un entorno WordPress. Verás cómo preparar los archivos SVG, cómo usarlos en el frontend (inline SVG, ltimggt, máscaras), ejemplos CSS prácticos (hover, transiciones, variables del tema) y cómo integrarlo de forma segura en WordPress (habilitar subida de SVG, inlining desde el servidor, shortcode, recomendaciones de seguridad).

¿Qué hace currentColor y por qué es útil para SVG?

currentColor es una palabra clave CSS que toma el valor de la propiedad color del elemento y lo aplica donde se use (por ejemplo, en border-color, fill, stroke, etc.). Aplicada a un SVG, permite que el color del icono sea controlado por el CSS del sitio (p. ej. color del texto del contenedor), lo que facilita temas, estados hover y variantes sin modificar el archivo SVG por cada color.

Principios básicos

El SVG puede llevar en sus formas (path, circle, rect…) un atributo fill. Si ese fill está fijado a un color literal (p. ej. #000), el CSS externo normalmente no lo sobreescribirá salvo que se haga inline o se use !important en reglas específicas.
La forma más fiable para permitir que CSS controle el color es usar inline SVG (el código SVG insertado directamente en el HTML) o preparar el SVG para usar fill=currentColor o no tener atributos fill (y luego aplicar fill vía CSS).
Si usas ltimg src=…svggt, no puedes cambiar internamente los fills desde CSS del documento principal (salvo soluciones con filtros CSS, invert/sepia, o inlining via JS/PHP).

Preparar el archivo SVG

Abre el SVG en un editor de texto y realiza una de estas opciones recomendadas:

Eliminar atributos fill dejándolos libres, y controlar el color por CSS.
Establecer explícitamente fill=currentColor en las formas principales (path, circle,…).
Incluir una regla interna en el SVG como path{fill:currentColor}.

Ejemplo de SVG original (colores fijos):

ltsvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 width=24 height=24gt
  ltpath d=M2 2h20v20H2z fill=#333/gt
lt/svggt

Convertido para usar currentColor (opción A, con fill en cada path):

ltsvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 width=24 height=24 role=img aria-hidden=truegt
  ltpath d=M2 2h20v20H2z fill=currentColor/gt
lt/svggt

O, alternativa (opción B) sin atributos fill y con estilo CSS interno:

ltsvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 width=24 height=24 role=img aria-hidden=truegt
  ltstylegtpath{fill:currentColor}lt/stylegt
  ltpath d=M2 2h20v20H2z/gt
lt/svggt

Uso CSS con inline SVG

Cuando el SVG está inline, simplemente controlas su color desde CSS, y al usar fill: currentColor el icono adoptará ese color.

Ejemplo de CSS para tamaño y color (usa variables si tu tema las define):

.icon {
  width: 1.5rem
  height: 1.5rem
  color: #1a1a1a              / el SVG con fill=currentColor usará este color /
  vertical-align: middle
  transition: color 0.2s ease
}
.icon--accent { color: #0073aa }    / variante de color /
.button:hover .icon { color: #fff } / cambio en hover /

HTML inline de ejemplo:

ltbutton class=button style=background:#0073aa color:#fffgt
  ltsvg class=icon viewBox=0 0 24 24 fill=currentColor aria-hidden=truegt
    ltpath d=... /gt
  lt/svggt
  ltspangtEnviarlt/spangt
lt/buttongt

Transiciones y estados (hover, active)

Para animar cambios de color añade transiciones sobre la propiedad color, no sobre fill directamente (aunque fill cambia con color porque usamos currentColor):

.icon { transition: color 180ms ease }
.button:hover .icon { color: #ffffff }

Uso de variables CSS del tema

Si el tema define variables CSS (p. ej. –color-primary), puedes usarlas para controlar los SVG:

.icon { color: var(--color-primary, #0073aa) }

SVG como imágenes (ltimggt) — limitaciones y alternativas

Si insertas el SVG con ltimg src=icon.svggt, el documento padre no puede acceder fácilmente a los elementos internos por tanto la propiedad fill interna seguirá la que esté en el archivo SVG. Opciones para que el color cambie:

Generar varias versiones del SVG (no recomendable).
Usar JS para cargar el SVG y reemplazar la ltimggt por el código inline (ver ejemplo JS más abajo).
Usar máscaras (mask-image / -webkit-mask) para colorear una forma SVG con background-color/currentColor.
Usar filtros CSS (invert/sepia) como truco para recolorear, pero son frágiles y dan colores limitados.

Ejemplo: máscara con currentColor (funciona bien para iconos monocromos):

.icon-mask {
  width: 2rem
  height: 2rem
  color: #0073aa / color aplicado al icono /
  background-color: currentColor
  -webkit-mask: url(/wp-content/uploads/icon.svg) no-repeat center/contain
  mask: url(/wp-content/uploads/icon.svg) no-repeat center/contain
}

Reemplazar ltimggt por inline SVG con JavaScript

Si no puedes cambiar la plantilla para que emita SVG inline, puedes usar JS al cargar la página para inyectarlo (solo cuando no puedas usar PHP para inlinearlo). Ejemplo simple:

document.querySelectorAll(img.svg-replace).forEach(function(img){
  fetch(img.src).then(r =gt r.text()).then(svgText =gt {
    var div = document.createElement(div)
    div.innerHTML = svgText
    var svg = div.querySelector(svg)
    if(svg){
      svg.classList.add(...img.classList)
      svg.setAttribute(role,img)
      svg.setAttribute(aria-hidden,true)
      img.replaceWith(svg)
    }
  }).catch(console.error)
})

Implementación en WordPress: permitir subidas SVG (seguridad)

WordPress bloquea SVG por defecto por razones de seguridad. Las opciones seguras:

Instalar un plugin probado y mantenido como SVG Support o Safe SVG, que saneará o controlará el uso de SVG.
Si prefieres código, añadir el tipo MIME permitiendo .svg y aplicar saneamiento. Recomendación: confiar en una librería segura en lugar de codear una solución casera.

Snippet mínimo para permitir subida (añadir a functions.php). Esto solo añade el mime type, no garantiza seguridad completa:

/ Añadir a functions.php: permite subir SVG (no realiza saneamiento) /
add_filter(upload_mimes, function(mimes){
  mimes[svg]  = image/svg xml
  mimes[svgz] = image/svg xml
  return mimes
})

Mejor opción: usar un plugin de saneamiento o validar el SVG al guardarlo. Una estrategia segura es aceptar subida pero no permitir SVG de terceros sin saneamiento — o permitir solo administradores.

Inline SVG desde PHP (recomendado para control total)

Una manera robusta en WordPress es inyectar el contenido del archivo SVG desde PHP (por ejemplo con un shortcode) y asegurarte de sanearlo con una función segura o usar una librería. Aquí un ejemplo simple de shortcode que devuelve el SVG desde una ruta segura (mejor adaptarlo a tus reglas de seguridad):

/ functions.php: shortcode [inline_svg src=/wp-content/uploads/icon.svg] /
function inline_svg_shortcode(atts){
  atts = shortcode_atts(array(src=>), atts, inline_svg)
  src = wp_normalize_path( ABSPATH . ltrim(atts[src], /) )
  if(!file_exists(src)) return 
  svg = file_get_contents(src)
  / Opcional: sanear svg aquí con DOMDocument o una librería /
  return svg
}
add_shortcode(inline_svg,inline_svg_shortcode)

Uso en editor: [inline_svg src=/wp-content/uploads/icon.svg] o mediante PHP en plantillas echo do_shortcode([inline_svg src=/wp-content/uploads/icon.svg])

Targetear elementos dentro de un inline SVG desde CSS

Si tu SVG contiene varias capas (p. ej. path para relleno y stroke para contorno), puedes aplicar reglas a esas partes:

.svg-icon .fill-layer { fill: currentColor }
.svg-icon .stroke-layer { stroke: currentColor stroke-width: 1.5px }

Ejemplo de SVG con clases internas:

ltsvg class=svg-icon viewBox=0 0 24 24gt
  ltpath class=fill-layer d=... /gt
  ltpath class=stroke-layer d=... fill=none /gt
lt/svggt

Buenas prácticas y accesibilidad

Añade role=img y un lttitlegt o usa aria-labelledby para iconos que no sean meramente decorativos.
Para iconos puramente decorativos usa aria-hidden=true.
Si usas inline SVG, evita scripts dentro del SVG y sanea contenido subido por usuarios.
Evita confiar únicamente en MIME types comprueba contenido (no solo la extensión) cuando permites subida de SVG.
Prefiere soluciones server-side (inlining desde PHP) para rendimiento y control, y cachea resultados si es posible.

Ejemplos de uso real en WordPress

1) Icono en un botón con hover que cambia el color:

ltbutton class=btn style=color:#0073aagt
  ltsvg class=icon viewBox=0 0 24 24 fill=currentColorgt
    ltpath d=... /gt
  lt/svggt
  Enviar
lt/buttongt

.btn { background:#fff color:#0073aa border:1px solid #0073aa padding:0.5rem 1rem }
.btn:hover { background:#0073aa color:#fff }
.btn .icon { width:1rem height:1rem margin-right:.4rem transition:color .18s}

2) Icono en menú que usa color del tema (variable CSS):

.menu-item .icon { color: var(--menu-link-color) }
.menu-item:hover .icon { color: var(--menu-link-hover-color) }

Consejos finales y resumen

La forma más limpia y flexible es usar SVG inline con fill=currentColor o CSS interno que defina fill:currentColor.
Si no puedes inliner el SVG, usa máscaras CSS para iconos monocromos o inyecta SVG vía JS/PHP.
Siempre piensa en seguridad: utiliza un plugin probado para SVG o implementa saneamiento y control de permisos.
Usa variables CSS del tema para que los iconos sigan la paleta del diseño y faciliten soporte para modos (dark/light).

Recursos útiles

Documentación currentColor (MDN)
Guía SVG (MDN)
Plugin SVG Support — opción recomendada para manejo seguro de SVG en WordPress

SushiHost