¿El mejor formato de archivo para gráficos vectoriales escalables en la web?

Question

Estoy construyendo un nuevo sitio web y me gustaría que el logotipo de ese sitio web se vea igualmente nítido en todos los dispositivos (desde computadoras de escritorio hasta pantallas de retina en el iPhone y el iPad).

El logotipo que tengo no contiene ningún degradado o píxeles, por lo que podría guardarlo fácilmente en formato vectorial. Sin embargo, nadie puede decir cuál sería el mejor formato para esto.

¿Es SVG o PNG, por ejemplo?

¿Y cómo crearía un archivo SVG?

No hay mucha información disponible, incluso en Google.

Gracias por compartir tu experiencia con esto.

Answer 1

Dado que SVG significa "gráficos vectoriales escalables", esa es probablemente su mejor opción;) PNG es un formato de píxeles, por lo que no se escalará tan bien como se acerque o aleje.

Una biblioteca común para hacer imágenes SVG es Processing.js, ¡compruébalo y mira si hace lo que quieres que haga!

Answer 2

Bueno, la respuesta correcta es: "depende", los SVG son más difíciles de dibujar por los navegadores y para visualizarse correctamente hay algunos factores involucrados, por otro lado los PNG son más fáciles de mostrar, especialmente en dispositivos móviles plataformas, por ejemplo, dispositivos iOS están optimizados para dibujar imágenes PNG.

Por otro lado, los svgs tienen la ventaja de que se pueden escalar tanto como se desee, y son livianos para ser transmitidos a través de la red.

Puede crear imágenes SVG con Inkscape o adobe illustrator.

Saludos

Answer 3

Oh Boy - hay many of them. También hay formatos compuestos que contienen datos vectoriales raster + (como el popular formato PDF). Sospecho que la solución de PDF sería más portátil, dado que de alguna manera exportará su logotipo a PDF como datos vectoriales. Demonios, puedes incluso display PDF con javascript solamente. O puede tomar la ruta de adobe flash ...

Answer 4

Diseños de logotipo se mantienen mejor a unos pocos formatos: PDF, SVG, AI, EPS, & DXF. (Formatos de verdadero vector: escalables/sin pérdida) Una imagen vectorial verdadera se puede escalar sin fin, sin píxeles ni distorsión.

Y, si utiliza un formato de mapa de bits, asegúrese de atenerse a los archivos PNG. PNG admiten transparencia y son mapas de bits sin pérdida, pero siguen siendo una imagen ráster, por lo que mostrarán cierto grado de pérdida de calidad cuando se escala, según corresponda. Por lo tanto, PNG es ideal para algunos usos web, pero no es algo que recomendaría para imprimir.

Recomiendo el formato .png para la visualización web, pero los diseños de impresión/versiones deben estar en formato vectorial verdadero.