6 errores comunes de SVG (y cómo corregirlos) | trucos CSS

Alguien me preguntó recientemente cómo me acerco a la depuración de SVG incrustados. Dado que es parte del DOM, podemos inspeccionar cualquier SVG incrustado en cualquier navegador DevTools. Y debido a eso, tenemos la capacidad de evaluar las cosas y descubrir cualquier problema u oportunidad potencial para optimizar SVG.

Pero a veces ni siquiera podemos ver nuestros SVG. En estos casos, hay seis cosas específicas que busco al depurar.

1. El viewBox valores

Él viewBox es un punto común de confusión cuando se trabaja con SVG. Está técnicamente bien usar SVG nativo sin él, pero perderíamos uno de sus beneficios más significativos: escalar con el contenedor. Al mismo tiempo, puede funcionar en nuestra contra cuando está mal configurado, lo que resulta en un recorte no deseado.

Los elementos están allí cuando se recortan, solo están en una parte del sistema de coordenadas que no vemos. Si abrimos el archivo en algún programa de edición de gráficos, podría verse así:

¿La forma más fácil de arreglar esto? Agregar overflow="visible" a SVG, ya sea en nuestra hoja de estilo integrada style o directamente como un atributo de representación SVG. Pero si también aplicamos un background-color a SVG, o si tenemos otros elementos a su alrededor, las cosas pueden verse un poco mal. En este caso, la mejor opción sería editar viewBox Para mostrar esa parte del sistema de coordenadas que está oculta:

Hay algunas cosas adicionales sobre viewBox que vale la pena revisar mientras estamos en el tema:

Cómo funciona viewBox ¿trabaja?

SVG es un lienzo infinito, pero podemos controlar lo que vemos y cómo lo vemos a través de la ventana gráfica y viewBox.

Él vista del puerto es un marco de ventana en el lienzo infinito. Sus dimensiones están determinadas por width y height atributos o en CSS con el apropiado width y height Podemos especificar cualquier unidad de longitud que queramos, pero si proporcionamos números sin unidades, por defecto son píxeles.

Él viewBox está determinada por cuatro valores. Los dos primeros son el punto de partida en la esquina superior izquierda (x y y valores, se permiten números negativos). Los edito para reencuadrar la imagen. Los dos últimos son el ancho y la altura del sistema de coordenadas en la ventana gráfica; aquí es donde podemos editar la escala de la cuadrícula (que obtendremos en la pestaña de escalado).

Aquí hay un marcado simplificado que muestra el SVG viewBox y en width y height ambos atributos se establecen en <svg>:

<svg viewBox="0 0 700 700" width="700" height="700">
  <!-- etc. -->
</svg>

Reformulación

Así que esto:

<svg viewBox="0 0 700 700">

...mapas a:

<svg viewBox="start-x-axis start-y-axis width height">

La ventana que vemos comienza desde donde 0 a lo largo del eje x y 0 en el eje y se encuentran.

Cambiando esto:

<svg viewBox="0 0 700 700">

...a esto:

<svg viewBox="300 200 700 700">

... ancho y alto siguen siendo los mismos (700 unidades cada uno), pero el origen del sistema de coordenadas está ahora en 300 punto en el eje x y 200 a lo largo del eje y.

En el siguiente video agrego rojo <circle> a SVG centrado en 300 punto en el eje x y 200 en el eje Y. Observe cómo cambia viewBox coordenadas a los mismos valores también cambia la ubicación del círculo en la esquina superior izquierda del marco, mientras que el tamaño del SVG renderizado sigue siendo el mismo (700X700). Todo lo que hice fue "replantear" las cosas con viewBox.

Aumento

Podemos cambiar los dos últimos valores dentro del viewBox para ampliar o reducir la imagen. Cuanto mayores sean los valores, más unidades SVG se agregan para que quepan en la ventana gráfica, lo que da como resultado una imagen más pequeña. Si queremos mantener una proporción de 1:1, nuestro viewBox el ancho y la altura deben coincidir con nuestros valores de ancho y alto de la ventana gráfica.

Veamos qué sucede en Illustrator cuando cambiamos estos parámetros. viewport que está representado por un cuadrado blanco de 700px. Todo lo demás fuera de esta área es nuestro lienzo SVG infinito y está recortado de forma predeterminada.

La figura 1 a continuación muestra un punto azul en 900 a lo largo del eje x y 900 a lo largo del eje Y. Si cambio los dos últimos viewBox valores de 700 a 900 Me gusta esto:

<svg viewBox="300 200 900 900" width="700" height="700">

…entonces el punto azul vuelve a estar casi completamente a la vista, como se ve en la figura 2 a continuación. Nuestra imagen se encogió porque aumentamos los valores de viewBox, pero las dimensiones reales de ancho y alto del SVG permanecieron iguales, y el punto azul volvió a acercarse al área sin recortar.

Hay un cuadrado rosa como evidencia de cómo la cuadrícula se escala para adaptarse a la ventana gráfica: el módulo se vuelve más pequeño y caben más líneas de cuadrícula en la misma área de la ventana gráfica. Puedes jugar con los mismos valores en el siguiente bolígrafo para ver cómo funciona en acción:

2. Falta width y height

Otra cosa común que observo al depurar SVG en línea es si el marcado contiene width o height EN muchos casos esto no es un gran problema a menos que el SVG esté dentro de un contenedor de posicionamiento absoluto o un contenedor flexible (ya que Safari calcula el SVG width valor con 0px en cambio auto). width o height en estos casos nos impide ver la imagen completa como podemos ver desde abriendo esta demostración de CodePen y compáralo en Chrome, Safari y Firefox (toca las imágenes para ampliarlas).

¿La solución? Agregue ancho o alto, ya sea como un atributo de presentación, incrustado en el atributo de estilo o en CSS. Evite usar la altura por sí sola, especialmente cuando se establece en 100% o autoOtra solución es sí establecer el derecho y valores dejados.

Puedes jugar con el siguiente bolígrafo y combinar las diferentes opciones.

3. Involuntario fill y stroke colores

También es posible aplicar color a <svg> etiqueta, ya sea un estilo incorporado o provenga de CSS. Esto está bien, pero puede haber otros valores de color a lo largo del marcado o estilos que entren en conflicto con el color establecido en <svg>haciendo las partes invisibles.

Por eso tiendo a buscar fill y stroke atributos en el marcado SVG y eliminarlos. El siguiente video muestra un SVG que diseñé en CSS con rojo fillHay algunos casos en los que partes del SVG se rellenan en blanco directamente en el marcado, que eliminé para revelar las partes que faltan.

4. Identificadores faltantes

Esto puede parecer súper obvio, pero te sorprendería la frecuencia con la que lo veo surgir. Digamos que creamos un archivo SVG en Illustrator y hemos sido muy cuidadosos al nombrar nuestras capas para que obtenga ID coincidentes agradables en el marcado en la exportación Y digamos que planeamos diseñar ese SVG en CSS usando esos ID .

Es una buena manera de hacer las cosas. Pero muchas veces he visto el mismo archivo SVG exportado por segunda vez en la misma ubicación y las ID son diferentes, generalmente al copiar/pegar directamente los vectores. Tal vez se agregó una nueva capa o se cambió el nombre de una de las existentes o algo así. Cualquiera que sea el caso, las reglas de CSS ya no coinciden con los ID en el marcado SVG, lo que hace que el SVG se represente de manera diferente a lo esperado.

En archivos SVG de gran tamaño, es posible que tengamos dificultades para encontrar estos identificadores. Este es un buen momento para abrir DevTools, verificar la parte de los gráficos que no funciona y ver si esas ID aún coinciden.

Así que diría que vale la pena abrir un archivo SVG exportado en un editor de código y compararlo con el original antes de cambiar las cosas. Las aplicaciones como Illustrator, Figma y Sketch son inteligentes, pero eso no significa que no seamos responsables de revisarlas.

5. Lista de verificación de recorte y enmascaramiento

Si el SVG se recorta inesperadamente y viewBox comprueba bien, por lo general miro CSS para clip-path o mask propiedades que pueden interferir con la imagen. Es tentador seguir mirando el marcado en línea, pero es bueno recordar que el estilo SVG puede estar ocurriendo en otros lugares.

El recorte y el enmascaramiento de CSS nos permiten "ocultar" partes de una imagen o elemento. en SVG, <clipPath> es una operación vectorial que recorta partes de una imagen sin resultados parciales <mask> La etiqueta es una operación de píxeles que permite transparencia, efectos de translucidez y bordes borrosos.

Esta es una pequeña lista de verificación para depurar casos en los que están involucrados el recorte y el enmascaramiento:

• Asegúrese de que el trazado de recorte (o máscara) y el gráfico se superpongan. Las partes superpuestas son lo que se muestra.
• Si tiene una ruta compleja que no se cruza con su gráfico, intente aplicar transformaciones hasta que coincidan.
• Sin embargo, aún puede inspeccionar el código interno con DevTools <clipPath> o <mask> no se renderizan, ¡así que úsalo!
• Copie la marca en el interior <clipPath> y <mask> e insertarlo antes de cerrar </svg> Luego agrega un fill a estas formas y verifique las coordenadas y dimensiones del SVG. Si aún no ve la imagen, intente agregar overflow="hidden" a <svg> etiqueta.
• Comprueba que un único La identificación se usa para <clipPath> o <mask>y que se aplica el mismo identificador a las formas o grupo de formas que se recortan o enmascaran. Una identificación que no coincida romperá la apariencia.
• Compruebe si hay errores tipográficos en la puntuación entre <clipPath> o <mask> etiquetas.
• fill, stroke, opacityo algunos otros estilos aplicados a los elementos dentro <clipPath> son inútiles: la única parte útil es la geometría del área de relleno de esos elementos. Por lo tanto, si utiliza <polyline> se comportará como un <polygon> y si usas un <line> No verá un efecto de recorte.
• Si no ve su imagen después de aplicar un <mask>Asegúrate de eso fill del contenido de enmascaramiento no es todo negro. El brillo del elemento de enmascaramiento define la opacidad del gráfico final. Podrá ver a través de las partes más claras y las partes más oscuras ocultarán el contenido de su imagen.

Puedes jugar con elementos enmascarados y recortados este bolígrafo.

6. Espacios de nombres

¿Sabía que SVG es un lenguaje de marcado basado en XML? ¡Bueno, lo es! El espacio de nombres para SVG se establece en xmlns atributo:

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- etc. -->
</svg>

Hay mucho que saber sobre los espacios de nombres en XML, y MDN tiene un gran ejemplo de eso. Baste decir que el espacio de nombres proporciona contexto al navegador, informándole que el marcado es específico de SVG. La idea es que los espacios de nombres ayuden a evitar conflictos cuando hay más de un tipo de XML en el mismo archivo, como SVG y XHTML. Este es un problema mucho menos común en los navegadores modernos, pero puede ayudar a explicar los problemas de representación de SVG en navegadores más antiguos o navegadores como Gecko que son estrictos en la definición de tipos de documentos y espacios de nombres.

La especificación SVG 2 no requiere espacio de nombres cuando se usa sintaxis HTML. Pero esto es crucial si la compatibilidad con navegadores heredados es una prioridad, tampoco estaría de más agregarlo. Así, cuando <html> elementos xmlns atributo está definido, no entrará en conflicto en estos casos raros.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px">
      <!-- etc. -->
    </svg>
  </body>
</html>

Esto también es cierto cuando se usa un SVG incrustado en CSS, como configurarlo como imagen de fondo. En el siguiente ejemplo, aparece un icono de marca de verificación en la entrada después de una validación exitosa. Así es como se ve el CSS:

textarea:valid {
 background: white url('data:image/svg+xml,
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26">
    <circle cx="13" cy="13" r="13" fill="%23abedd8"/>
    <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/>
    </svg>') no-repeat 98% 5px;
}

Cuando eliminamos el espacio de nombres dentro del SVG en la propiedad de fondo, la imagen desaparece:

Otro prefijo de espacio de nombres común es xlink:href. Lo usamos a menudo cuando hacemos referencia a otras partes de SVG como: plantillas, filtros, animaciones o degradados. La recomendación es empezar a sustituirlo por... href ya que el otro está en desuso después de SVG 2, pero puede tener problemas de compatibilidad con navegadores más antiguos. En ese caso podemos usar ambos. Solo recuerda incluir el espacio de nombres xmlns:xlink="http://www.w3.org/1999/xlink" si todavía estás usando xlink:href.

¡Mejora tus habilidades SVG!

Espero que estos consejos le ayuden a ahorrar mucho tiempo si se encuentra resolviendo problemas de archivos SVG incrustados renderizados incorrectamente. Estas son exactamente las cosas que estoy buscando. Tal vez tenga diferentes banderas rojas que está buscando; si es así, ¡hágamelo saber en los comentarios!

La conclusión es que vale la pena tener al menos una comprensión básica de las diferentes formas en que se puede usar SVG. Desafíos de CodePen a menudo incluyen SVG y ofrecen buenas prácticas. Aquí hay algunos recursos más para subir de nivel:

Hay algunas personas que sugiero seguir por la bondad relacionada con SVG: