Perfiles SVG
- SVG 1.0: todos los navegadores modernos de escritorio y móviles son compatibles con SVG 1.1, así que nunca elija esta opción.
- SVG 1.1: casi siempre querrás esto.
- SVG Tiny / Basic: este es un subconjunto de SVG destinado a dispositivos móviles. Solo un puñado de dispositivos admite SVG Tiny y no la especificación completa, así que ve a SVG 1.1.
Nota: SVG Tiny no reduce el tamaño del archivo, es solo un subconjunto de SVG que es adecuado para dispositivos de baja potencia de procesamiento. Descartará degradados, opacidad, fuentes incrustadas y filtros. Erik Dahlström dice: Todos los espectadores completos de SVG 1.1 deberían poder mostrar todo el contenido SVG 1.1 Diminuto / Básico (según las especificaciones), y probablemente todo el contenido SVG 1.2 Diminuto que también produce Illustrator.
Nota de fuentes : si no tiene ningún texto en su imagen, esta configuración no importa.
Adobe CEF: nunca use esta opción si tiene la intención de mostrarla en los navegadores. Es la forma en que Adobe incrusta fuentes en archivos SVG, por lo que sé, esto solo es compatible con el complemento de visor SVG de Adobe.
SVG: esto incorpora la fuente como SVG, que no es compatible con Firefox, pero es una buena opción si tiene la intención de admitir solo dispositivos móviles (que generalmente ejecutan webkit).
Cree contornos: querrá hacer esto la mayor parte del tiempo , a menos que tenga una gran cantidad de texto. Si tiene una gran cantidad de texto, querrá incrustar la fuente con WOFF, pero deberá hacerlo a mano.
Subconjunto :
Ninguno: esto negará la configuración anterior y no incrustará ninguna fuente, si no le importa que la fuente recurra a otra fuente en la computadora del usuario, elija esto.
Solo se usan glifos: querrá esto la mayor parte del tiempo si elige incrustar la fuente. Solo incorpora los caracteres utilizados para que no infle el tamaño de su archivo.
[resto de subconjunto]: esto es bastante claro, puede elegir incluir toda la fuente o subconjuntos. Solo es útil si su SVG es dinámico y el texto puede cambiar según la entrada del usuario.
Imágenes : esto solo importa si incluye imágenes de mapa de bits
Incrustar: esto suele ser lo que desea , codifica la imagen como un uri de datos para que simplemente cargue un archivo en lugar del archivo svg con sus imágenes de mapa de bits complementarias.
Enlace: use esto solo si tiene varios archivos svg que hacen referencia a un archivo de mapa de bits (por lo que no se descarga cada vez que muestra el archivo svg).
Tenga en cuenta que las imágenes de mapa de bits vinculadas no se mostrarán si el SVG se muestra a través de la <img>
etiqueta, porque img
no permite cargar recursos externos. Además: webkit tiene un error que no muestra imágenes de mapa de bits dentro de los archivos svg, incluso si los incrusta. En resumen: use una <svg>
etiqueta simple si tiene la intención de incrustar o vincular imágenes de mapa de bits, no lo use <img>
.
Conservar las capacidades de edición de Illustrator
Prefiero guardar un archivo .ai como mi imagen de origen, y pensar en el archivo SVG como una Export for web
característica. De esa manera, se concentra en reducir el tamaño del archivo y tiene una copia inmaculada de su archivo vectorial con todas las capacidades de edición. Así que no elijas esto.
Lugares decimales
El valor predeterminado 3
es una configuración sensata y puede olvidarse de ella.
Sin embargo, si tiene rutas realmente complicadas con muchos puntos que reducen esta configuración a 1 o incluso a 0, se reducirá sustancialmente el tamaño del archivo. Pero debe tener cuidado porque los segmentos bezier son muy sensibles a esta configuración y pueden parecer un poco distorsionados. Entonces, si baja esta configuración, asegúrese siempre de que se vea aceptable en un navegador.
Codificación
La explicación detrás de la codificación de caracteres es bastante técnica, y solo se refiere a archivos svg con texto. La codificación más probable que necesita es UTF-8 , no cambie esto a menos que sepa lo que está haciendo.
Optimizar para Adobe SVG Viewer
Adobe SVG Viewer es un complemento de navegador desde tiempos en que los navegadores no admitían SVG de forma nativa. No sé lo que hace, pero es irrelevante, no verifique esto .
Incluir datos de corte
Esto agrega una acumulación de metadatos a su archivo SVG, a menos que planee abrir su archivo SVG más adelante en Illustrator y encontrar sus sectores (si los tiene), no marque esto
Incluir XMP
Más metadatos con respecto al archivo, puede leer en XMP aquí . no verifique esto
Salida de menos <tspan>
elementos
Esto se atenuará si no tiene texto. SVG no admite tablas de interletraje, por lo tanto, ciertas secuencias de caracteres parecerán demasiado espaciadas, es decir AVA
. Illustrator funciona agregando tspan
elementos y ajustando un poco las posiciones de los personajes. Esto agrega un poco de hinchazón al archivo , no verifique esto a menos que le importe más el tamaño del archivo que la apariencia del texto .
Usar <textpath>
elemento para texto en una ruta
Esto se atenuará si no tiene texto en una ruta. Los navegadores tienden a variar mucho cuando se trata de colocar texto en una ruta, por lo que Illustrator intenta ser útil al aplicar la rotación y la posición al personaje en lugar de dejar el trabajo al navegador. no marque esto a menos que le importe más el tamaño del archivo que la apariencia del texto .
En general, le recomiendo que busque en SVG en general, encontrará que se parece mucho a HTML y le permite modificar cosas que no se pueden hacer dentro de Illustrator.