Máscaras CSS con SVG: conserva la silueta y define el color

Una máscara CSS con SVG controla qué partes de un elemento permanecen visibles. Para un icono de un solo color, usa la silueta del SVG como máscara y pinta el elemento con background-color: currentColor. El color visible del icono procede entonces de CSS, en lugar de mostrar la paleta original del SVG.

Empieza por la transparencia del original. Un rectángulo opaco detrás de la ilustración puede convertir el icono previsto en un bloque sólido. Una abertura transparente debe seguir siendo transparente si quieres que se vea la página que hay debajo.

La referencia de mask-image de MDN describe cómo la imagen original y el modo de máscara determinan la visibilidad. La tarea práctica consiste en preparar una silueta útil, elegir su interpretación e inspeccionarla al tamaño que usa tu interfaz.

Usa una máscara cuando el objetivo sea una silueta pintada de un color

Piensa en un icono de marcador con una abertura en forma de rombo y una pequeña franja coral. Como imagen SVG normal, tiene dos colores. Como máscara alfa sobre un elemento azul, la ilustración opaca revela el azul; la franja coral deja de aparecer como un color independiente.

Esto resulta útil para un icono de interfaz cuyo color cambia con el tema. Sería una mala opción de entrega para una ilustración donde las diferencias de color transmiten significado.

Si necesitas editar rellenos y trazos SVG individuales, usa la guía de edición de color SVG. La máscara es útil cuando la parte reutilizable es la propia silueta. Para un límite geométrico definido, ajusta un recorte SVG personalizado a su destino y elige entre estirar la silueta y conservar sus proporciones.

Prepara un original pequeño con una abertura real

Guarda este ejemplo original como bookmark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

El primer trazado contiene el exterior del marcador y su abertura en rombo. No hay un rectángulo de fondo de tamaño completo. El segundo rectángulo pequeño es la franja coral.

Abre el SVG sobre un fondo contrastante antes de usarlo como máscara. Comprueba que puedas ver a través del rombo y alrededor del límite exterior. Un rombo blanco pintado sobre un marcador sólido se vería parecido en una página blanca, pero seguiría siendo opaco en una máscara alfa.

En un recurso existente, inspecciona las formas de fondo además del motivo visible. La guía de fondo SVG transparente cubre la diferencia entre espacio vacío y un rectángulo blanco.

Pinta el elemento del icono con CSS

Coloca icon.css junto al SVG y usa estas reglas:

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

Usa una etiqueta visible en el botón:

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

Aquí el icono acompaña a «Save article», por lo que se oculta del árbol de accesibilidad en lugar de repetir esa etiqueta. El ejemplo solo muestra la presentación; conecta el botón por separado a la acción de guardar de tu aplicación.

El elemento necesita una caja que pintar, por eso el CSS establece anchura, altura y modo de visualización. currentColor usa su color de texto. Cambiar el color del botón cambia la pintura del icono sin reescribir bookmark.svg.

La referencia de mask-size define contain como el ajuste de toda la imagen de máscara conservando sus proporciones. Combinado con centrado y sin repetición, hace que el original ocupe una caja de icono predecible. La guía de máscaras de web.dev cubre estos controles de tamaño y repetición.

Sirve el ejemplo mediante HTTP, también durante las pruebas locales. La descripción de mask-image de MDN advierte que los originales de imagen locales file:// no se aceptan para este uso. Una imagen de máscara ausente o fallida puede dejar invisible el elemento enmascarado.

Distingue una imagen SVG de un elemento mask de SVG

Un archivo SVG usado como imagen y una referencia a un elemento SVG <mask> son entradas diferentes. No elijas el modo solo porque el nombre del archivo termine en .svg.

La referencia de mask-mode especifica este valor predeterminado dependiente del original. En la interpretación alfa, el negro opaco y el blanco opaco revelan ambos el elemento. En la interpretación de luminancia, el blanco opaco lo revela y el negro lo oculta; los valores intermedios pueden producir visibilidad parcial.

mask-type se aplica a un elemento SVG <mask> y su valor predeterminado es luminancia, según la referencia de mask-type. Añadirlo al span normal del icono no cambia la interpretación de una máscara de imagen. Usa mask-mode en el elemento enmascarado cuando necesites especificar ese comportamiento.

El ejemplo del marcador usa una imagen SVG externa normal y elige alfa explícitamente. Prueba las propiedades usadas en los navegadores compatibles; la compatibilidad con la función general de máscaras no demuestra compatibilidad con todas las combinaciones de modo y original.

Diagnostica un cuadrado, un icono ausente o una abertura rellena

Una prueba negativa útil consiste en poner un rectángulo blanco opaco de tamaño completo detrás de una copia de bookmark.svg. Con interpretación alfa, esa copia revela toda el área de la máscara. Cambiar el rectángulo de blanco a negro no recupera la silueta porque ambos colores siguen siendo opacos.

Elimina el fondo no deseado del original en lugar de ajustar el color del elemento. Conserva el archivo original para compararlo con la copia corregida.

Mantén estas pruebas separadas. Una solicitud de imagen correcta no demuestra que el original tenga la transparencia adecuada, y una transparencia correcta no aporta una anchura o altura que falte al elemento.

Evalúa el resultado al tamaño del componente

Amplía el marcador para inspeccionar sus contornos y vuelve después al tamaño real de interfaz. Comprueba la abertura en rombo, la muesca inferior y el espacio entre el icono y su etiqueta. La versión ampliada ayuda a encontrar defectos; la pequeña indica si el diseño es útil.

Prueba dos fondos de página contrastantes y dos colores de icono. La abertura debería mostrar el color de la página en todos los casos. Si sigue blanca, vuelve a la estructura del original.

Para una familia de iconos, compara los símbolos vecinos al mismo tamaño CSS. Sus viewBoxes pueden contener cantidades diferentes de espacio vacío, haciendo que cajas iguales parezcan desiguales. La guía de preparación de iconos para kits de interfaz cubre ese trabajo de coherencia.

Recupera una silueta rasterizada solo cuando el original lo necesite

Un PNG transparente ya puede ser una máscara CSS; convertirlo en SVG no es un requisito para aplicar máscaras. Conserva un original vectorial limpio existente cuando lo tengas.

Si un icono útil solo existe como imagen rasterizada irregular, el flujo de PNG a SVG de PerfectVector puede ayudar a preparar una primera versión editable. Recorta hasta el motivo, inspecciona la vista previa vectorial para detectar regiones de fondo y aberturas perdidas y descarga el SVG. Usa ese archivo en la máscara y repite las comprobaciones al tamaño del componente.

En el marcador, evalúa la muesca exterior y la abertura en rombo antes de preocuparte por la franja coral original. La pintura uniforme de la máscara absorberá de todas formas el color de esa franja. Una ilustración multicolor complicada puede necesitar otro tratamiento; elige la silueta deliberadamente en lugar de vectorizar cada detalle.

La introducción a la vectorización de imágenes explica la recuperación del original de forma más amplia. Un archivo vectorial sigue necesitando una forma útil y transparencia adecuada para este flujo CSS.

Preguntas frecuentes

¿Una máscara SVG conserva los colores originales? Una máscara controla la visibilidad. En el ejemplo de fondo uniforme, el elemento aporta un color, por lo que no se conservan los colores separados del original.

¿Por qué mi icono se convierte en un cuadrado sólido? Busca un fondo opaco de tamaño completo en el original de la máscara. En la interpretación alfa, el blanco y el negro opacos revelan ambos el elemento.

¿Las máscaras SVG son siempre máscaras de luminancia? No. Una imagen SVG normal suele usar alfa con match-source. Un elemento mask de SVG usa luminancia de forma predeterminada, salvo que se cambie su interpretación.

¿Tengo que convertir un PNG transparente en SVG? No. PNG puede proporcionar una imagen de máscara. La vectorización es opcional cuando necesitas recuperar o editar una silueta adecuada de un original rasterizado.

Fuentes

1. MDN — mask-image — Originales de imagen, fallos de carga, requisitos de servidor local y visibilidad.
2. MDN — mask-mode — Alfa, luminancia y valores predeterminados dependientes del original.
3. MDN — mask-type — Interpretación de un elemento mask de SVG.
4. MDN — mask-size — Ajuste contain y proporciones de imagen.
5. web.dev — aplicar efectos a imágenes con CSS mask-image — Máscaras de imagen, tamaño y repetición.

Empieza con un icono y comprueba su silueta, abertura y tamaño final de interfaz. Si necesitas recuperar un original rasterizado, prepara una primera versión SVG, inspecciona su transparencia y pruébala con la pintura CSS que usará tu interfaz.