¿Configuración óptima para exportar SVG para la web desde Illustrator?

Estoy buscando usar un logotipo SVG para un sitio web, para que se vea genial en un diseño receptivo para todos los dispositivos.

Pero como hay problemas , quiero admitir tantos dispositivos y navegadores como sea posible. La velocidad de carga también es una consideración importante. ¿Cómo encajan las configuraciones de exportación en Adobe Illustrator en todo esto?

En Illustrator, hay varias opciones para exportar SVG. En primer lugar, ¿ qué perfil SVG es el mejor?

¿Asumo que SVG Tiny tiene un tamaño de archivo más bajo? ¿Muchos dispositivos son compatibles con SVG Tiny? ¿Cuáles son las diferencias más importantes? (Sin tener que leer este monstruo W3 ).

En segundo lugar, supongo que la mejor opción para la ubicación de la imagen es "enlace". (Ver descripción después del signo de exclamación).

Alternativamente, ¿cómo es el soporte del navegador para la opción "incrustar"?

¡Gracias!

PD: Habrá una opción alternativa alfa-PNG, pero quiero que el SVG sea compatible de la mejor manera posible. (Ahora que lo pienso, una opción alternativa, como un JPG, probablemente sería la mejor opción en este caso, ya que alpha-PNG necesita una solución para IE más antiguo).

Actualización: también hay más opciones que se pueden configurar. No estoy trabajando con texto, por lo que el único relevante que veo son los lugares decimales. Para logotipos, algo que se muestra como máximo 200x200px (por lo tanto, 400x400px en pantallas Retina), ¿es "3" la mejor configuración? ¿O "2" para minimizar el tamaño del archivo?

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 imgno 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 webcaracterí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 3es 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 tspanelementos 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.