10 reglas de oro para SVGS sensibles

Sep 11, 2025

Cómo

[dieciséis]

Las muchas ventajas de SVG, incluidas imágenes vectoriales infinitamente escalables, tamaños de archivos pequeños y integración directa con el DOM, lo convierten en un ajuste natural para diseño web adaptable . A pesar de que la especificación SVG es una década de antigüedad, es un apoyo relativamente reciente en muchos navegadores y herramientas significa que todavía hay varios trucos, lagunas y gotchas que atrapan a diseñadores y desarrolladores de web incluso experimentados.

Aquí, he resumido lo más importante de estas 10 reglas de oro.

01. Configure sus herramientas correctamente

Justo cuando un artesano agudiza sus herramientas antes de comenzar a trabajar, cualquier persona que trabaje con SVG debe configurar sus aplicaciones para entregar un formato vectorial en el método más eficiente y optimizado posible. Hay una serie de configuraciones para implementar.

Primero, a menos que haya razones convincentes para hacer lo contrario, establecer mediciones a 'Pixels' en su herramienta de vectores. Si bien no importa a SVG (que medirá el visitante y elementos alegremente en casi cualquier sistema de medición) tiene sentido desarrollar el dibujo SVG utilizando unidades CSS comunes, en lugar de la impresión predeterminada de pulgadas; Y también hace que sea mucho más fácil agregar. @medios de comunicación Consultas y otras intervenciones más tarde.

No haga que el área de lienzo sea más grande de lo que debe ser. Al igual que las imágenes de mapa de bits, cualquier 'espacio en blanco' en la SVG no se utilizará, y se sustituye mejor con los márgenes CSS. Tenga en cuenta que muchas herramientas de vectores, como el boceto, "recortarán automáticamente" el área de lienzo a los elementos seleccionados.

Al mismo tiempo, no recorte el área de lienzo a los bordes exactos de los elementos. El antialiasing aún se aplicará a la SVG, y el corte demasiado cercano también puede recortar el antialiasing. En su lugar, deje al menos 2px claro donde sea que el borde del lienzo se acerca a un elemento.

La capacidad de respuesta y el rendimiento están estrechamente relacionados, así establece que la precisión decimal no fuera más de dos puntos. SVG no piensa en enteros, por lo que un punto vectorial puede tener un valor de 1.45882721PX. Esta precisión extrema es totalmente innecesaria, y solo se suma al tamaño de código y el tamaño del archivo, por lo que es mejor truncarlo en este punto.

Del mismo modo, dibuje formas vectoriales usando la mayor cantidad de puntos como sea posible. Muchos nuevos diseñadores asumen más puntos, es mejor, cuando el reverso es realmente verdadero: algunos puntos, se colocan bien, proporcionan un mayor control sobre un elemento, al tiempo que reduce el tamaño del archivo.

Si le dan archivos vectoriales que no siguen esta regla, no se preocupe, la mayoría arte vectorial Las aplicaciones tienen una opción 'Simplify' que puede usar para reducir la cantidad de puntos en un elemento sin cambiar su forma. Alternativamente, para el trabajo detallado, sugeriría un complemento como los vectores de los gráficos astutos.

02. Retire los atributos de altura y anchura.

La mayoría de las aplicaciones agregan una gran cantidad de código patentado e innecesario en su exportación SVG. El único código requerido al inicio de la mayoría de los archivos SVG es la siguiente:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 500 500" & gt;
& lt;! - código svg aquí - & gt;
& lt; / svg & gt;

Para nuestros propósitos, el aspecto más importante es la eliminación de la ancho y altura Atributos que la mayoría de las aplicaciones incluyen automáticamente. Esto hace que el SVG responda plenamente en los navegadores modernos.

Si está procesando muchos SVGS, o está en una prisa, no necesita completar este paso a mano. En su lugar, puedes seguir las sugerencias establecidas en la tercera regla de oro ...

03. Optimizar y minificar la salida SVG.

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly

Cualquiera que sea la herramienta que use para crear su contenido SVG, todavía vale la pena procesar su salida a través de una herramienta como Svgomg , que recortará el código notablemente. Normalmente, puede ahorrar alrededor del 20 al 80 por ciento en el tamaño del archivo. El mismo código se puede integrar localmente. Como una tarea de tragato o gruñido .

04. Modificar código para IE

La Regla 2 mencionó que los SVG optimizados correctamente son totalmente sensibles en los navegadores modernos. Eso es cierto si contamos con Microsoft Edge como un navegador moderno. Para IE 9-11, tenemos algunos temas que abordar. Si estamos utilizando el SVG como una imagen:

 & lt; img src = "cuenta regresiva.svg alt =" cuenta regresiva "& gt;

Podemos forzar IE9-11 para mostrar la imagen correctamente usando el selector de atributos CSS:

 IMG [SRC $ = ". SVG"] {ANCHO: 100%;}

Las imágenes SVG funcionan bien en la producción general, pero tienen una interactividad limitada: la mayoría de los navegadores ignorarán la interactividad y la animación dentro de un SVG colocado en una página como una página como un . Además, las imágenes SVG son una solicitud HTTP adicional para el navegador.

Por estas y otras razones, SVG se usa cada vez más en línea. En ese caso, el código SVG necesita un poco más de tratamiento para IE:

 & lt; Body & GT;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365" preservaspectratio = "xmidymin slice" & gt;

Además de preservar la relación de aspecto Atributo, es decir, necesita un poco más de orientación para preservar la ampliación correcta de la imagen: tomar el ancho de la SVG ( 365 En este caso), divídalo por la altura ( 525 ) Y multiplica el resultado en un 100 por ciento. Esto se convertirá en el fondo acolchado Valor para el SVG, 'apuntalar' abierto lo suficiente en IE para mostrar el SVG en su relación de aspecto correcta:

 & lt; Body & GT;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365"
preservaspectratio = "xmidymin slice"
Estilo = "Ancho: 100%; relleno inferior: 69.52%; Altura: 1px; desbordamiento: visible" & gt;

Tenga en cuenta que, con el fin de mantener las cosas concisas y claras, las muestras de códigos en el resto de este artículo no incluyen estos cambios. Amelia Bellamy-Royds ha escrito un Excelente artículo sobre escalado SVG .

05. Considera SVG para el texto del héroe.

Using SVG for hero text means it will automatically scale in line with its container

Actualmente no hay ningún estándar CSS para el texto del tamaño de su contenedor. Es posible escalar texto utilizando las unidades VW, pero que casi siempre requería al menos dos intervenciones de consulta de medios para "abrazar" el texto en ciertos límites de visor. Sin embargo, el texto SVG cambiará el tamaño de un contenedor automáticamente:

 & lt; encabezado y gt;
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 285 80" & gt;
& lt; texto x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / encabezado & gt;

El CSS:

 Texto de encabezado svg {
Peso de fuente: 900; Tamaño de fuente: 90px; Relleno: Azul;
}

Mantener el SVG en línea conserva la accesibilidad y el valor de SEO, y permite que el texto se establezca utilizando cualquier fuente ya incrustada en la página. Ver aquí para más información.

06. Deje el ancho y la altura en su lugar para los iconos progresivos.

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized

Una excepción a la Regla 2 es iconos y pequeños logotipos, que deben conservar su ancho y altura Atributos Si desea que sean progresivamente mejoradas:

 & lt; a href = "http://codepen.io" & gt;
    & lt; svg rol = "img" aria-label = "codepen" ancho = "50" altura = "50" & gt;
        & lt; title & gt; codepen & lt; / title & gt;
        & lt; use xlink: href = "# Codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg style = "mostrar: ninguno;" & gt;
    & lt; símbolo id = "Codepen" vistax = "0 0 50 50" & gt;
        & lt; camino d = "..." / & gt;
    & lt; / Symbol & GT;
& lt; / svg & gt;

Puedes ver un ejemplo de esta técnica en acción. aquí .

Si solo tuvimos el tamaño de los iconos SVG con CSS, y la hoja de estilo del sitio no se carga, aparecerán los iconos en el tamaño predeterminado de un elemento reemplazado: 300px x 150px. Al mantener la altura y el ancho como atributos, podemos analizarlos al tamaño táctil razonable más cercano de forma predeterminada, y usar nuestro CSS para mejorar la forma en que se presentan.

07. Use efectos vectoriales para mantener delgadas los cabello.

De forma predeterminada, SVG escala todo con la ventana gruesa, incluido el grosor del accidente cerebrovascular. Por lo general, esto funciona bien, pero en algunos casos, los diagramas y los accidentes cerebrovasculares se aplican como efectos en el exterior del texto, en particular, es posible que desee mantener los golpes del mismo grosor, sin importar cuál sea el tamaño del dibujo. Este es el dominio de los poco conocidos. efecto vectorial Propiedad, que se puede aplicar como un atributo de presentación o en CSS:

 Camino {
    Rellenar: #fff; Trazo: # 111;
    Ancho del accidente cerebrovascular: 2;
    Efecto del vector: accidente cerebrovascular no escamado;
}

Echa un vistazo a Un ejemplo completo de esta técnica. .

08. Recuerda mapas de bits

Muchos desarrolladores asumen que SVG solo pueden usar vectores, pero los JPEG y PNG también se pueden aplicar a un dibujo SVG. Y siempre que haya seguido mis reglas hasta ahora, esas imágenes responderán cuando agregue un mapa de bits a través de la etiqueta:

 & lt; imagen ancho = "1024" altura = "768" xlink: href = "lake-louise.jpg" x = "1300" y = "150" rol = "imagen" title = "Crowsness Pass" & GT; & lt; / image & gt;

09. Considerar soluciones adaptativas.

[dieciséis] El logo clásico de Coca-Cola representado en diferentes tamaños de adaptación.

Hacer que las cosas vayan "Squish" es solo una parte del diseño sensible. En qué se trata RWD, en el sentido más grande del diseño adaptativo, está presentando contenido apropiado en todos los tamaños de la ventana.

Esto se puede lograr de varias maneras. Responselogos.co.uk proporciona una serie de ejemplos que utilizan SVG Sprites, pero prefiero integrar las consultas de medios en la SVG para crear lo que llamo 'Módulos de marca'. Este enfoque me permite agregar, eliminar y modificar la visibilidad de los componentes. Leer más sobre los módulos de marca adaptativa En mi artículo .

Esta misma técnica se puede utilizar para diagramas, ilustraciones, mapas y más. En los módulos más simples, el propio CSS se puede escribir dentro de la SVG, lo que lo hace utilizable en todas partes, como se describe en la regla anterior.

10. Integrar las consultas de medios en SVG

Muchas personas no saben que las consultas de los medios de CSS se pueden escribir dentro de SVG en sí:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; estilo & gt;
SVG G {TRANSICIÓN: 1S; }
@media todos y (Max-Width: 90REM) {
#BRINK, #COKE {Opacidad: 0; }
}
& lt; / estilo & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; camino d = "M109.6 ... & gt;

Es importante tener en cuenta que la consulta de los medios solo puede "ver" el elemento que está dentro de: es decir, cualquier medida se relaciona con el elemento en sí, no en la página. Un positivo inconveniente de este enfoque es que el área de lienzo de la SVG siempre seguirá siendo la misma, en relación con los elementos dentro de ella.

Esto puede resultar en elementos muy pequeños en tamaños de viewport, enmarcado dentro de un área de lona relativamente grande. Hay varias soluciones para esto, incluyendo Cambiar el tamaño del visor y Ampliación de los elementos para compensar. .

Conclusión

La escalabilidad infinita de SVG es su mayor activo, pero una característica que aún está uniforme por los navegadores y los editores de gráficos vectoriales. Al integrar estas pautas en su flujo de trabajo de producción y comunicándolas a otras personas en su equipo, puede crear SVG sin problemas para la Web, lo que lo hace parte de los activos que utiliza en desarrollo todos los días.

Este artículo apareció originalmente en revista neta emisión 283; cómpralo aquí !

Artículos relacionados:

12 herramientas de prueba de código imprescindibles
Afila tus habilidades de dibujo
Animaciones SVG de supercarga con GSAP

10 reglas de oro para SVGS sensibles

01. Configure sus herramientas correctamente

02. Retire los atributos de altura y anchura.

03. Optimizar y minificar la salida SVG.

04. Modificar código para IE

05. Considera SVG para el texto del héroe.

06. Deje el ancho y la altura en su lugar para los iconos progresivos.

07. Use efectos vectoriales para mantener delgadas los cabello.

08. Recuerda mapas de bits

09. Considerar soluciones adaptativas.

10. Integrar las consultas de medios en SVG

Conclusión

Cómo - Artículos más populares

Ilustración de mapa: una guía paso a paso

Cómo combinar 3D y arte cómico en Zbrush

Cómo lograr la escala en tus pinturas

Use la bolsa de herramientas de Marmoset para presentar modelos en VR

Modelado de procedimientos maestro

Haz un logo en ilustrador

Descubre recubrimiento y cómo hacer el mejor uso de ello

Prototipo de un botón de acción flotante en Pixate

Categorías