Que es un archivo svg

svg vs png

Inkscape es de uso gratuito y puede ser una opción decente si no tienes acceso a Illustrator o Sketch. Hay un tutorial completo en línea para el uso de Inkscape. Consulte la sección siguiente para obtener más información sobre la creación de archivos SVG en Adobe Illustrator.

Tal vez la forma más fácil de crear sofisticados archivos SVG es utilizar una herramienta que probablemente ya está familiarizado con: Adobe Illustrator. Si bien ha sido posible hacer archivos SVG en Illustrator desde hace bastante tiempo, Illustrator CC 2015 agregó y agilizó las características de SVG. Estos cambios incluyen diferentes opciones de exportación, un código SVG generado más limpio y la posibilidad de copiar y pegar archivos SVG en un editor de texto.

Puede pulsar este botón en cualquier momento para generar el texto del archivo SVG. Se abrirá automáticamente en el editor de texto predeterminado. Puede utilizarlo para ver cómo será su archivo final o incluso para copiar y pegar el texto desde él.

Aunque el archivo anterior funcionará bien, podemos utilizar las capas de Illustrator para añadir nombres y grupos a nuestro archivo SVG final. Las capas y los grupos en Illustrator se traducirán en clases y elementos g en el archivo y nos ayudarán a estilizar los gráficos con CSS.

ejemplo de archivo svg

En el proceso de diseño de un sitio web fácil de usar, es posible que encuentre algunas dificultades con las imágenes, especialmente con la resolución de las mismas. Es importante que la calidad de la imagen sea la adecuada: hay pocas cosas que parezcan menos profesionales en una página que un logotipo, un icono o una foto distorsionados y mal escalados.

Este problema se agrava con el diseño responsivo. Los visitantes ven su contenido tanto en ordenadores de sobremesa como en teléfonos inteligentes, por lo que, junto con el resto de su contenido, sus imágenes deberían estar optimizadas independientemente del dispositivo. ¿No sería bueno que existiera un formato digital que hiciera que las imágenes se vieran bien, sin importar su tamaño?

Los SVG son una especie de truco de magia en el diseño de sitios web: no sólo generan gráficos nítidos a cualquier escala, sino que también están optimizados para los motores de búsqueda, son programables, suelen ser más pequeños que otros formatos y son capaces de realizar animaciones dinámicas. Hay mucho que descubrir y aprender sobre los SVG.

En esta guía, voy a cubrir todos los fundamentos que usted necesita saber para empezar a trabajar con SVGs. Explicaré qué son estos archivos, cuándo utilizarlos y cómo empezar a crear archivos SVG por ti mismo.

cómo abrir un archivo svg

Dado que el texto se utiliza para describir el gráfico, un archivo SVG puede escalarse a diferentes tamaños sin perder calidad; en otras palabras, el formato es independiente de la resolución. Por este motivo, los gráficos para sitios web e impresos suelen crearse en formato SVG, de modo que puedan cambiar de tamaño para adaptarse a diferentes diseños en el futuro.

Otros archivos con la extensión de archivo .SVG que no están relacionados con un formato gráfico pueden ser, en cambio, archivos de juegos guardados. Juegos como Return to Castle Wolfenstein y Grand Theft Auto guardan el progreso del juego en un archivo SVG.

La forma más fácil y rápida de abrir un archivo SVG para verlo (no para editarlo) es con un navegador web moderno como Chrome, Firefox, Edge o Internet Explorer; casi todos ellos deberían proporcionar algún tipo de soporte de renderizado para el formato SVG. Esto significa que puede abrir archivos SVG en línea sin tener que descargarlos primero.

Si ya tiene un archivo SVG en su ordenador, el navegador web también puede utilizarse como un visor de SVG sin conexión. Abra esos archivos SVG a través de la opción Abrir del navegador web (el atajo de teclado Ctrl+O).

gráficos de red portátiles

Y encima SVG. SVG es tan complejo que las diferentes implementaciones de SVG no están de acuerdo con el aspecto que debe tener una imagen. Especialmente si esa imagen contiene <texto>, ya que depende del sistema. Lo que algunos de ustedes probablemente aprendieron a estas alturas es que si quieres tener un archivo SVG redistribuible, tienes que tener tu archivo de autoría en Inkscape, Illustrator, Batik, … y tienes tu archivo final que tiene todos los textos convertidos en rutas. De lo contrario, el archivo se verá muy diferente en cada máquina. Un ejemplo:

Y cada vez hay más casos límite que hacen que la implementación de SVG sea demasiado compleja. Los archivos pueden ser tirado de fuentes externas a través de xlink, el contenido del archivo podría ser construido por las secuencias de comandos complejos, y así sucesivamente. Pero incluso los archivos más simples podría romper.

Todo esto me hizo comprender: XML está destinado a ser un archivo de autoría para gráficos vectoriales como xcf o psd que contiene no sólo la información gráfica final, sino también cómo se construye ese gráfico pieza por pieza.

Lo que realmente necesitamos es un formato como PNG para gráficos vectoriales. Compacto, versátil y sencillo de implementar. Lo que la mayoría de nosotros no necesitamos son animaciones de gráficos vectoriales o aplicaciones de gráficos vectoriales. Lo que definitivamente no necesitamos es un formato de gráficos vectoriales que pueda hacer tomas crudas.

Entradas relacionadas

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad