Procesos creativos prácticos
Logotipo SVG en modo oscuro: prueba currentColor
El logotipo de una cafetería desaparece en la cabecera oscura de la web, aunque se vea bien en una factura clara. Primero decide cómo se inserta el SVG: el código en línea y una imagen externa no reciben el color de la página del mismo modo.
Creamos una marca ficticia Cedar Cup en el espacio de archivos de Ciyo y conservamos un HTML que puedes abrir. Su único trazado de taza permanece intacto. Probamos una edición de color y el comportamiento del navegador; no rediseñamos la marca ni auditamos toda la web.
Conserva un SVG original intacto
Inspecciona la fuente antes de editar. Anota viewBox, datos del trazado y relleno fijo. Varios rellenos, trazos o estilos incrustados pueden requerir decisiones separadas; cambiar un atributo no crea un sistema de temas completo.
El original tiene viewBox 0 0 120 100 y un trazado con relleno #303036. Ciyo renderizó una vista junto al código. La vista permite reconocer la marca; la fuente SVG aporta los datos para editarla con precisión.
Cambia el color y conserva la geometría
En esta marca de un solo color, Ciyo solo cambió fill="#303036" por fill="currentColor". Una comparación independiente confirmó que el trazado y viewBox seguían iguales. El original ocupa 266 bytes y la copia 271 bytes; son los tamaños de estos archivos conservados.
currentColor usa el valor de color del elemento. Si el SVG está en línea, CSS puede proporcionarlo desde su contexto en la página. Elige colores claros y oscuros intencionadamente, sin depender de un valor predeterminado sin definir.
Conserva el viewBox y todos los trazados de este SVG. Guarda una copia aparte sustituyendo su único relleno fijo por currentColor. Crea HTML real con marcas fijas y currentColor sobre paneles claros y oscuros, más un control img externo. Renderiza el HTML, inspecciónalo e informa de los rellenos calculados de las marcas en línea. Devuelve los SVG y el HTML exactos.Prueba el código en línea en un navegador real
La página guardada coloca versiones con relleno fijo y currentColor sobre dos paneles contrastados. En el claro, ambas usan #303036. En el oscuro, currentColor usa #FAF6ED y el original sigue en gris carbón. El fondo oscuro permite ver el fallo con claridad.
Abrimos el HTML guardado en Chrome y comprobamos los rellenos SVG en línea. Esto verifica el código y los estilos mostrados en ese navegador. No demuestra contraste con todos los colores de marca ni compatibilidad con cualquier herramienta de publicación.
| Panel | Marca fija | Marca currentColor |
|---|---|---|
| Claro | #303036 | #303036 |
| Oscuro | #303036 | #FAF6ED |
Usa una imagen externa como control
Un SVG cargado mediante img es otro documento de imagen. Declarar color en el elemento padre no ordena recolorear sus trazados internos. El control externo demuestra ese límite. Si necesitas archivos externos para cada tema, exporta variantes de color explícitas o utiliza una implementación en línea apropiada.
El primer HTML tenía comillas incorrectas dentro de una URI de datos. Ciyo corrigió la codificación antes de la comprobación final. Es un buen motivo para inspeccionar el archivo renderizado en lugar de aceptar código que solo parece razonable.
Revisa la página guardada antes de integrarla
Abre la demostración siguiente, inspecciona ambos fondos y revisa tu cabecera real al tamaño previsto. Un cambio de color técnicamente correcto puede dejar detalles poco distinguibles. Comprueba aparte el foco, el nombre del enlace y el texto accesible si la marca es interactiva.
El HTML es autónomo y su fuente no contiene scripts. Su CSS y código en línea son un ejemplo para revisar con quien desarrolla tu web, no una actualización automática del sitio publicado.
Entrega la regla de color junto al archivo
Entrega juntos el original intacto, el SVG editado y el HTML comprobado. Especifica el método de inserción probado y el color previsto en cada fondo. Evitarás que alguien coloque el archivo correcto en un contexto que no pueda heredar el color esperado.
En una marca multicolor, acuerda primero qué zonas deben mantenerse fijas. Empieza con una marca controlada de un solo color; conserva las relaciones de color intencionadas en lugar de convertir todos los rellenos a currentColor.
Preguntas prácticas
¿currentColor recolorea un img externo?
El color de la página no entra automáticamente en el documento SVG externo. Prueba tu método de inserción y usa variantes explícitas cuando corresponda.
¿Se volvió a dibujar el logotipo?
No. La edición cambia un valor de relleno; el trazado y viewBox coinciden con el original.
¿Basta el color del modo oscuro para la accesibilidad?
No. Revisa contraste, tamaño, nombre y comportamiento del enlace en la interfaz final.
Prueba una marca sobre dos fondos
Lleva un SVG aprobado a Ciyo y pide una demostración de navegador conservada antes de entregar el archivo editado a quien desarrolla tu web.