Illustrator svg con imagen de captura de pantalla, tamaño de archivo grande

Illustrator y SVG solo brindan calidad y claridad si crea documentos con formas vectoriales en ellos, pero está almacenando mapas de bits allí.

Los vectores son como una receta que se puede ampliar o reducir para alimentar a 2 o 200, mientras que un mapa de bits es como una cena de televisión para 1. Nunca alimentará a 200. No puede aumentar su calidad más allá de lo que ya está congelado allí.

La razón probable por la que obtiene archivos de gran tamaño es que está escalando la captura de pantalla en Illustrator y luego Illustrator está guardando una imagen de mapa de bits mucho más grande en el SVG. Puede convertir fácilmente un mapa de bits de 1 megabyte en un mapa de bits de 15 megabytes de esta manera, pero nuevamente, eso no aumenta la calidad.

La mejor manera de mejorar la presentación de imágenes de mapa de bits es usar un editor de HTML, no Illustrator, y colocar sus mapas de bits PNG en una página HTML. Luego agregue bordes u otros atributos de presentación a sus imágenes con reglas CSS.

Si desea hacer la presentación de la mejor calidad posible, no use capturas de pantalla. En su lugar, utilice una herramienta que pueda convertir una vista Web en una imagen de mapa de bits con proporciones de píxeles de 1:1 (estándar) y 2:1 (Retina). Luego, sus imágenes PNG se mostrarán con una calidad mucho mayor en Retina Display (suponiendo que su trabajo esté listo para Retina, que debería ser). Por ejemplo, en Mac hay una aplicación llamada "Capas de página" (disponible en Mac App Store) que , dada una URL, puede capturar la totalidad de la representación web de esa URL en 1: 1 o 2: 1 y brindarle un PNG plano o un documento de Photoshop en capas, donde cada elemento de su trabajo está en una capa diferente. Si no usa una Mac, busque una herramienta como esa en su plataforma. Luego, esas capturas de mapa de bits de su trabajo se pueden convertir en una cartera navegable lista para Retina en cualquier editor HTML.

Sin embargo, una cosa a tener en cuenta es mostrar el trabajo web nativo real, no imágenes del trabajo. Si el trabajo es nativo de la Web, entonces la mejor manera de presentarlo es como elementos nativos de la Web. Entonces, en lugar de crear una página HTML con una imagen de una tabla, colocaría la tabla real. Es posible que desee convertir los estilos en estilos en línea con una herramienta, luego simplemente copie/pegue el ejemplo HTML de su trabajo en una cartera HTML de su trabajo. O puede usar iframes para mostrar el trabajo en línea real en su cartera sin ninguna conversión.

El problema es que SVG es un formato de texto y, por lo tanto, todas las imágenes (afaik) están incrustadas a través de una cadena base64. Eso suele ser bastante grande.

Lo que puede hacer es intentar optimizar el PNG (reduciendo colores, etc.) tanto como sea posible con una herramienta antes de ponerlo en Illustrator y esperar que no deshaga todo eso.

Los formatos binarios (o al menos los formatos comprimidos) probablemente funcionarían mejor, pero no hay garantía de que obtenga archivos de tamaño pequeño.

Puede haber varios problemas:

El PNG que está guardando puede tener transparencia, también llamado canal alfa. Si se mezcla con otros objetos, o Illustrator cree que podría hacerlo, esto podría causar que el tamaño del archivo aumente. SOLUCIÓN: Asegúrese de que el PNG no tenga transparencia o, mejor aún, guárdelo como un jpeg, que no puede tener transparencia.

Es posible que desee guardar como jpeg de todos modos, ya que los tamaños de archivo son generalmente más pequeños que png (ya que utiliza compresión con pérdida). Guarde en una configuración de alta calidad (8 o 10) para evitar artefactos de compresión.

Otra cosa podría ser que haya marcado 'Conservar las capacidades de edición de Illustrator', lo que puede aumentar el tamaño del archivo. Lo necesitas para editar en Illustrator, obviamente, pero no para exportar para la web.

También puede intentar vincular sus capturas de pantalla en lugar de incrustarlas, pero debe realizar un seguimiento de un archivo separado.

Finalmente, puede tener gráficos vectoriales reales en lugar de una captura de pantalla. Puede hacer esto guardando un gráfico como PDF, generalmente imprimiéndolo en un archivo PDF. Entonces puede importar el PDF a Illustrator, limpiarlo y guardar los gráficos vectoriales como un svg. Sin embargo, no recomendaría esto, ya que el PDF puede ser difícil de limpiar y, con todos esos detalles, el tamaño del archivo puede ser más grande que una captura de pantalla.

Como Jeremy S. ya ha señalado, crear un PDF del sitio web es una forma. ¡Aquí hay un consejo rápido para convertir sitios web a PDF usando Paparazzi! y Croquis .

• La guía de 3 pasos para convertir cualquier página web en Sketch | Interfaz de usuario de piratería
  • Inicie Paparazzi, luego escriba la URL de cualquier sitio web en la barra de URL y presione 'enter'.
  • Espere hasta que se cargue la captura de pantalla, luego inicie Sketch y arrastre la captura de pantalla a cualquier documento de Sketch abierto.
  • En Sketch: filtre el panel de capas por la palabra "clip", luego seleccione todas las capas y presione la tecla 'retroceso' en su teclado para eliminar todas esas capas. (Estas son máscaras que le impiden seleccionar elementos en su documento).

Luego puede exportar a PDF (o SVG) y continuar editando en Illustrator. Este es mi flujo de trabajo preferido para rediseños de sitios web, donde tengo que trabajar con muchos elementos existentes que deben reorganizarse.

También Paparazzi toma toda la altura de la página, lo que generalmente es difícil a través de los diálogos de impresión normales del navegador.