para optimizar muse imagenes illustrator hacer filtros exportar cómo cs6 html css image svg adobe-illustrator

html - optimizar - Configuración óptima para exportar SVG para la web desde Illustrator



imagenes svg para web (1)

Perfiles de SVG

  • SVG 1.0: todos los navegadores de escritorio y móviles modernos son compatibles con SVG 1.1, por lo tanto, nunca elijas 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 admiten SVG Tiny y no todas las especificaciones, por lo tanto, vaya 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á gradientes, 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 Tiny / Basic (según las especificaciones), y probablemente todo el contenido SVG 1.2 Tiny que Illustrator produce también.

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 manera de Adobe de incrustar fuentes en archivos SVG, hasta donde sé, esto solo es compatible con el plugin SVG viewer de Adobe.

  • SVG: esto incorpora la fuente como SVG, que no es compatible con Firefox, pero es una buena opción si pretendes admitir solo dispositivos móviles (que generalmente ejecutan webkit).

  • Cree esquemas: 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 tendrá que hacerlo a mano.

Subconjunto :

  • Ninguno: esto negará la configuración anterior y no incrustará ninguna fuente. Si no le importa que la fuente vuelva a pertenecer a alguna otra fuente en la computadora del usuario, elija esta opción.

  • Solo se usan los glifos: querrá esto la mayor parte del tiempo si elige incrustar la fuente. Solo incrusta los caracteres utilizados para que no infle el tamaño del archivo.

  • [resto de subconjunto]: esto es bastante claro, puede elegir incluir toda la fuente o subconjuntos de la misma. Solo es útil si su SVG es dinámico y el texto puede cambiar en función de la entrada del usuario.

Imágenes : esto solo importa si incluye imágenes de mapa de bits

  • Incrustar: esto es generalmente lo que quiere , codifica la imagen como un uri de datos para que simplemente cargue un archivo en lugar del archivo svg con sus imágenes de mapas de bits complementarios.

  • Enlace: use esto solo si tiene varios archivos svg que hacen referencia a un archivo de mapa de bits (para que no se descargue cada vez que presente el archivo svg).

Tenga en cuenta que las imágenes de mapa de bits vinculadas no se mostrarán si SVG se muestra a través de la etiqueta <img> , ya que img no permite cargar recursos externos. Además: webkit tiene un error que no muestra imágenes de mapas de bits dentro de archivos svg, incluso si los incrusta. En resumen: utilice una etiqueta simple <svg> si tiene la intención de incrustar o vincular imágenes de mapa de bits, no use <img> .

Preserve 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 función de Export for web . De esta forma, se concentrará en reducir el tamaño del archivo y tendrá una copia prístina de su archivo vectorial con todas las capacidades de edición. Entonces no elijas esto.

Lugares decimales

El valor predeterminado 3 es una configuración sensata y, en general, puede olvidarse de eso.

Sin embargo, si tiene una ruta realmente complicada con muchos puntos bajando esta configuración a 1 o incluso a 0, se reducirá sustancialmente el tamaño del archivo. Pero debes tener cuidado porque los segmentos más blandos son muy sensibles a esta configuración y pueden parecer un poco distorsionados. Entonces, si baja esta configuración siempre asegúrese 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 los archivos svg con texto. La codificación más probable que necesitas es UTF-8 , no cambies esto a menos que sepas lo que estás haciendo.

Optimizar para Adobe SVG Viewer

Adobe SVG Viewer es un complemento de navegador desde el momento en que los navegadores no eran compatibles con SVG de forma nativa. No sé lo que hace, pero es irrelevante, no verifique esto .

Incluye cortar datos

Esto agrega relleno de metadatos a su archivo SVG, a menos que planee abrir su archivo SVG más tarde en Illustrator y encontrar sus sectores (si los tiene), no verifique esto.

Incluir XMP

Más metadatos sobre el archivo, puedes leer en XMP aquí . no verifique esto

Salida menos elementos <tspan>

Esto estará atenuado si no tienes texto. SVG no es compatible con las tablas de interletraje, por lo que algunas secuencias de caracteres aparecerán demasiado espaciadas, es decir, AVA . Illustrator funciona agregando elementos de tspan y ajustando un poco las posiciones de los personajes. Esto agrega un poco de hinchazón al archivo . No verifique esto a menos que se preocupe más por el tamaño del archivo que por la apariencia del texto .

Use el elemento <textpath> para el texto en una ruta

Esto estará atenuado 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 en el navegador. no verifique esto a menos que se preocupe más por el tamaño del archivo que por la apariencia del texto .

En general, recomiendo que veas SVG en general, verás que se parece mucho al HTML y te permite ajustar cosas que no se pueden hacer con Illustrator.

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

Pero dado que 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 de SVG es el mejor?

Supongo que SVG Tiny tiene un tamaño de archivo inferior? ¿Hay muchos dispositivos 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 la 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 de 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 sea la mejor servida 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 decimales. Para logotipos, algo que se mostrará como máximo 200x200px (así que 400x400px en pantallas Retina), ¿es "3" la mejor configuración? ¿O "2" para minimizar el tamaño del archivo?