.fw files.wiki
SVG

Archivos SVG

Gráficos vectoriales escalables

SVG es un formato de imagen vectorial basado en XML del W3C para gráficos 2D escalables, iconos, logotipos, diagramas y material gráfico web.

Scalable Vector Graphics

Desarrollador
World Wide Web Consortium (W3C)
Categoría
Gráficos vectoriales
Tipo MIME
image/svg+xml
Formato
Texto
Primera versión
2001
Última versión
SVG 2 Candidate Recommendation Draft
Estándar abierto
Sí

Abrir un archivo .SVG en línea

Leyendo el archivo…

¿Qué es un archivo .SVG?

Un archivo svg se refiere a un documento de Scalable Vector Graphics. SVG se refiere al lenguaje de marcado gráfico basado en XML que se usa para la representación de imágenes vectoriales bidimensionales del World Wide Web Consortium. SVG se publicó por primera vez en 2001 por W3C, y hoy el formato sigue siendo abierto. Los documentos SVG suelen ser texto plano y contienen un elemento raíz <svg>; sin embargo, a veces antes puede haber una declaración XML o algunos comentarios que preceden a <svg>.

Estos archivos contienen diversos datos, incluidas formas, líneas y trazados, texto, colores, incluidos degradados, efectos de relleno y patrones y máscaras, así como rutas de recorte o incluso imágenes incrustadas de origen no vectorial y elementos de metadatos o script para capacidades adicionales de animación. Debido a que no se basan en mapas de bits sino en vectores (lo que permite la escalabilidad matemática), las imágenes SVG pueden adaptarse a diferentes escalas sin ninguna pérdida de calidad, desde un icono pequeño con solo varios píxeles 16x16 hasta logotipos vectoriales o un póster de cualquier tamaño. Las imágenes SVG se usan en páginas web y sitios web (e incluso en apps, en el caso de webapps), conjuntos de iconos y logotipos, esquemas técnicos, gráficos, mapas y archivos de dibujo vectorial producidos por software como Inkscape, Adobe Illustrator, Corel DRAW, etc.

La extensión de formato .svg no suele compartirse con nada más que un formato SVG. El SVG comprimido estándar usa .svgz.

Cómo abrir un archivo .SVG

Abrir un archivo .SVG en Windows

  1. 1 Ve a la carpeta donde está tu archivo en Explorador de archivos. Normalmente, los archivos descargados terminan en Descargas.
  2. 2 Haz doble clic en tu archivo .SVG si tienes una aplicación para archivos .svg en tu equipo. Si no se abre, pasa al paso tres.
  3. 3 Haz clic derecho en tu archivo .SVG -> selecciona Abrir con -> Elegir otra aplicación.
  4. 4 Elige Google Chrome en la lista (Windows 11: elige Siempre). En Windows 10 -> marca "Usar siempre esta aplicación para abrir archivos .svg" y haz clic en Aceptar.

¿Sigue sin abrirse? Consulta los problemas comunes y sus soluciones, o ábrelo en tu navegador.

Programas para Windows

Abrir un archivo .SVG en macOS

  1. 1 En la app Finder, localiza tu archivo .SVG.
  2. 2 Solo haz doble clic en tu archivo .SVG para abrir automáticamente el programa asociado con él.
  3. 3 ¿Necesitas otra app en tu Mac? Haz Control-clic en el archivo (o clic derecho con el mouse). En el menú emergente, selecciona Abrir con -> Google Chrome.
  4. 4 Si no aparece en la lista, elige Otra… y busca la aplicación manualmente.

¿Sigue sin abrirse? Consulta los problemas comunes y sus soluciones, o ábrelo en tu navegador.

Programas para macOS

Abrir un archivo .SVG en Linux

  1. 1 Abre tu gestor de archivos. Según el escritorio, puede llamarse Archivos (GNOME), Dolphin (KDE Plasma), Nemo (Cinnamon) o Thunar (Xfce).
  2. 2 Haz doble clic en el archivo.
  3. 3 O elige otro programa haciendo clic derecho en el archivo -> Abrir con -> Google Chrome.
  4. 4 Instala Google Chrome (si no está instalado en tu equipo) desde el centro de software, el repositorio o Flathub.

¿Sigue sin abrirse? Consulta los problemas comunes y sus soluciones, o ábrelo en tu navegador.

Programas para Linux

Abrir un archivo .SVG en Android

  1. 1 Abre Archivos u otra app de gestión de archivos.
  2. 2 En Descargas, busca el archivo .SVG y ábrelo tocándolo.
  3. 3 Se mostrará una lista de apps capaces de abrir el archivo. Toca Google Chrome y pulsa Siempre para asociar de forma permanente este tipo de archivo con esta app.
  4. 4 ¿No hay ninguna app capaz de abrir este archivo? Descarga Google Chrome desde Google Play Store.

¿Sigue sin abrirse? Consulta los problemas comunes y sus soluciones, o ábrelo en tu navegador.

Programas para Android

Abrir un archivo .SVG en iPhone / iPad

  1. 1 Usa la app Archivos y ve a En mi iPhone, iCloud Drive o Descargas.
  2. 2 Toca el archivo .SVG que quieras abrir.
  3. 3 Si el archivo puede abrirse con una app integrada de iOS (formato compatible), se abrirá automáticamente.
  4. 4 Mantén pulsado el archivo para abrir el menú contextual -> elige Compartir -> selecciona Google Chrome en la lista de apps.
  5. 5 Si no aparece esa opción, primero descarga la app desde el App Store y luego toca el documento otra vez.

¿Sigue sin abrirse? Consulta los problemas comunes y sus soluciones, o ábrelo en tu navegador.

Programas para iPhone / iPad

Abrir un archivo .SVG en línea

  1. 1 Ve al visor en línea en la parte superior de esta página.
  2. 2 Arrastra el archivo hasta allí o selecciónalo, y su contenido aparecerá en la pestaña de tu navegador. El archivo no se sube.

¿Sigue sin abrirse? Consulta los problemas comunes y sus soluciones, o ábrelo en tu navegador.

Programas para En línea

Más detalles sobre cómo abrir archivos .SVG

Hoy en día, los navegadores te permitirán abrir tus archivos SVG tanto en computadoras como en smartphones. El software más rápido para usar con un archivo estándar debería ser Chrome, Firefox, Edge y Safari, porque image/svg+xml se puede abrir en estos programas de forma nativa, sin necesidad de aplicaciones adicionales. Las aplicaciones gratuitas que podrían abrir y modificar SVG en el sistema operativo Windows incluirían Inkscape, LibreOffice Draw y Boxy SVG. El software comercial de dibujo vectorial para escritorio sería Adobe Illustrator, CorelDRAW Graphics Suite y Affinity Designer. La versión en línea de Figma también puede ejecutarse en Windows.

El visor más rápido para trabajar con archivos SVG en el sistema operativo macOS sería Safari, porque puede mostrar SVG de inmediato. No es necesario instalar aplicaciones especiales, porque los navegadores te ayudarán. Si hace falta editar un archivo SVG, Adobe Illustrator, Inkscape, Boxy SVG, Affinity Designer, Sketch, Linearity Curve y Figma pueden ofrecerte todas las acciones necesarias. En el caso de Linux, necesitarás Inkscape como software convencional y editor de gráficos vectoriales. Los otros programas para abrir SVG podrían incluir GIMP (programa de rasterización), ImageMagick para convertir mediante la CLI o visores de navegador.

Los usuarios de Android e iOS podrían abrir la mayoría de sus SVG en visores de Chrome, Firefox, Edge o Safari, pero habrá algunas restricciones para la edición. Linearity Curve en iPadOS e iOS, además de aplicaciones web como Figma donde esté disponible, son las principales opciones prácticas de edición.

Para asegurarte de que la acción de doble clic es incorrecta, haz clic derecho en un archivo, elige navegador/visor/editor, que estén disponibles, y observa la diferencia. Debes asegurarte de que tu archivo SVG tenga la extensión .svg. Para asegurarte de que estás tratando con un archivo SVG, debes intentar abrirlo con el editor de texto para ver el marcado inicial del archivo que contiene la etiqueta <svg>. Si necesitas imprimir archivos SVG de alguna manera, abre primero este archivo con una herramienta de edición vectorial y revisa las fuentes, los colores y la configuración de página en un archivo para continuar con la conversión a PDF.

Detalles técnicos

Los archivos SVG son archivos XML de texto, no el contenedor preformateado de otro formato (fijo y binario). Esto significa que un documento puede comenzar con una declaración XML (<?xml version="1.0" encoding="UTF-8"?>), una definición DOCTYPE (<!DOCTYPE svg>), un comentario XML o la etiqueta de apertura <svg>. Por eso, un charset se vuelve importante, porque el análisis se ejecuta usando texto. Por ejemplo, un archivo puede contener una declaración XML sobre utf16 en lugar de un charset utf-8, lo que puede provocar un fallo en el análisis del documento.

El tipo MIME registrado es image/svg+xml. Los servidores web tienen que proporcionar este mime para que el navegador interprete los archivos SVG. De lo contrario, si los sirven con text/plain o application/octet-stream, el documento se descargaría en lugar de analizarse (a menos que uno especifique manualmente cómo se debe servir e interpretar el archivo). Los tamaños de los archivos son pequeños (iconos de 1-20 KBytes, las imágenes detalladas pueden ocupar hasta algunos megabytes según los detalles). Los archivos más grandes serían el caso cuando hay algunas imágenes ráster incrustadas, fuentes codificadas en el documento, algunos metadatos extra.

La estructura en árbol del documento probablemente consistirá en la raíz svg, grupos g, elementos path, rect, circle, line, polyline, polygon, text, image. Las coordenadas usan unidades de usuario, y los atributos viewBox, width, height, preserveAspectRatio y transform controlan la visibilidad del sistema de coordenadas. El estilo puede venir en forma de atributos de presentación, atributo style, estilos en línea dentro de elementos <style> de un archivo o un enlace externo css. Además, es importante que haya una compatibilidad variable entre navegadores, editores y herramientas de importación.

Puede haber metadatos en <title>, <desc>, <metadata>, datos RDF, datos de distintos editores como sodipodi y de Inkscape, fuentes e imágenes internas (data URI), y también cualquier enlace externo a datos de CSS, bibliotecas JS, etc.. SVG 1.0 fue estandarizado y adoptado como Recomendación W3C en 2001, SVG 1.1 Recomendación W3C se publicó dos años después y se actualizó más recientemente (Segunda edición en 2011).

Cómo convertir archivos .SVG

La conversión de SVG a PNG debe hacerse si quieres tener una imagen de mapa de bits transparente de tamaño fijo para apps, correo electrónico, redes sociales y programas incapaces de manejar SVGs. Para hacerlo, usa el comando de ImageMagick: magick input.svg -background none output.png. Sin embargo, puede que tengas que cambiar los ajustes de density/pixel, ya que produciría imágenes demasiado suaves. PDF tiene un formato de archivo de gráficos vectoriales. Usa el comando de Inkscape: inkscape input.svg --export-type=pdf --export-filename=output.pdf para crear un PDF a partir de tu SVG. También puedes convertir SVG a EPS, DXF, PNG y SVG sin procesar usando Inkscape. Conservan más funciones que muchos otros programas, como funciones específicas de Inkscape o curvas vectoriales.

Deberías considerar convertir SVG a JPG si incluye solo imágenes y necesita ser accesible para la mayor cantidad posible de dispositivos y navegadores. Usa el siguiente comando: magick input.svg -background white -flatten output.jpg Ten en cuenta que antes de aplicar esta acción, cualquier fondo transparente se aplanaría, mientras que los objetos vectoriales podrían sufrir cierta pérdida de nitidez debido a la naturaleza del formato JPG. Para preparar la publicación en línea, podrías comprimir los SVG en caso de que los proceses con la herramienta de comando svgo, que permite eliminar comentarios, caracteres vacíos y símbolos no utilizados de los archivos SVG. Además, puedes aplanar el texto creando contornos de los objetos de texto.

Convertir SVG puede causar la pérdida de animaciones, enlaces, CSS media, scripts, máscaras, fuentes externas, accesibilidad.

Convertir aHerramientaComando / nota
PNG ImageMagick magick input.svg -background none output.png Rasteriza vectores; elige la densidad o el tamaño para obtener una salida nítida, y se pierden la interactividad, la editabilidad del texto y las capas.
PDF Inkscape inkscape input.svg --export-type=pdf --export-filename=output.pdf Útil para impresión y compartición; los filtros, los modos de fusión, las fuentes y CSS pueden aproximarse según la compatibilidad del renderizador.
EPS Inkscape inkscape input.svg --export-type=eps --export-filename=output.eps Para flujos de trabajo de publicación antiguos; es posible que la transparencia, los filtros, la animación y algunos degradados de SVG no sobrevivan.
Plain SVG / optimized SVG SVGO svgo input.svg -o output.svg Elimina el marcado y los metadatos redundantes; los plugins agresivos pueden alterar los IDs, los ganchos de estilo, el texto de accesibilidad o los datos específicos del editor.
JPEG ImageMagick magick input.svg -background white -flatten output.jpg Crea una imagen raster con pérdida; la transparencia debe aplanarse y se pierde la escalabilidad vectorial.
WebP ImageMagick magick input.svg output.webp Bueno para entregar mapas de bits después de la rasterización; ya no queda DOM de SVG, CSS, animación ni capacidad de búsqueda.
DXF Inkscape inkscape input.svg --export-type=dxf --export-filename=output.dxf Útil para contornos de CAD/CAM; los rellenos, los filtros, el diseño del texto y el recorte pueden requerir limpieza manual.

Problemas comunes y soluciones

Significa que el servidor usa tipos MIME incorrectos; image/svg+xml definitivamente debería enviarse, pero el uso de text/plain y application/octet-stream a menudo también lleva a consecuencias como estas. Para ver si el documento SVG funciona como se espera cuando se guarda como un documento local, prueba abrirlo con un editor de texto adecuado, Chrome, Firefox, Edge y Safari; sin embargo, a veces algunas extensiones de archivo mienten, y necesitas comprobar si realmente es SVG, o PNG, ZIP, PDF o cualquier otra cosa comprimida. La advertencia "This page contains the following errors" aparece siempre que un editor no logra manejar algunas etiquetas malformadas, caracteres o la declaración de codificación. Casi todas las herramientas de gráficos vectoriales, Inkscape, cualquier editor que admita el formato XML podrían manejar fácilmente estos archivos y abrirlos para corregir errores. Además, un problema como "Failed to load the requested file" normalmente significa que la extensión de tu archivo te engaña; prueba a abrirlo en el editor de texto.

Los problemas con el reflujo del texto aparecen en caso de que no se puedan encontrar las fuentes en la máquina del usuario, y es mejor instalar las fuentes, reemplazar el tipo de letra por otros más seguros o simplemente convertir todo el texto a trazados mediante Inkscape o Adobe Illustrator. Los problemas con el sombreado o con los efectos de desenfoque aparecen, por ejemplo, siempre que algunas funciones especiales compatibles con Inkscape fallan en el programa de destino debido a canalizaciones antiguas de exportación SVG que no manejan bien esta función, etc. Cuando una parte de las imágenes externas no aparece y en su lugar hay un rectángulo negro, entonces algo salió mal en un <image href>; sería mejor incrustar esta imagen con la ayuda del data URI. A veces, archivos muy grandes tienen enormes cantidades de nodos y trazados, imágenes incrustadas u otros recursos; para corregir todos estos problemas, se puede usar fácilmente el comando de línea de comandos svgo para minimizar la cantidad de datos. Por último, a veces los sitios simplemente no aceptan cargas de algún formato vectorial, así que debería usarse un PNG o incluso PDF en su lugar.

Consideraciones de seguridad

Los SVG son capaces de ser activos en el sentido de contener scripts (especialmente JavaScript), controladores de eventos como onload, enlaces de hipertexto, vínculos a recursos externos, CSS, etc. Por eso tienen más interactividad en comparación con las imágenes de mapa de bits. Cuando se trata del uso de SVG por parte de los navegadores web, habrá una diferencia de comportamiento según la forma en que se carguen en las páginas; es decir, el SVG en línea en HTML no se comportará de la misma manera que el que se abrió mediante un enlace <img>. Los SVG que son subidos por fuentes no confiables a la página pueden convertirse en un vector de XSS si pasan a ser objeto de inserción en línea o si tienen habilitado un procesamiento flexible, por eso es fundamental asegurarse de que se saneen durante el proceso de subida. Un saneador regular eliminará scripts, atributos de controladores de eventos, nodos foreignObject, enlaces a archivos externos, URLs inadecuadas y metadatos innecesarios. SVG podría proporcionar acceso a algunos metadatos como metadatos de editores, rutas y nombres de archivos, información de capas, metadatos RDF, títulos, descripciones y otras entidades de comentarios y no visibles.

Historia y versiones

SVG nació en el W3C como parte del SVG Working Group, como resultado de varias propuestas a finales de los años 90 relacionadas con gráficos vectoriales para la web, en particular PGML de Adobe y Sun, y VML de Microsoft, Autodesk y Macromedia. La primera versión de la especificación, SVG 1.0, se convirtió en una Recomendación del W3C en septiembre de 2001, y proporcionó gráficos vectoriales basados en XML en la web abierta. Después de esto, SVG 1.1 se convirtió en una Recomendación en enero de 2003 y en la versión predeterminada implementada en navegadores y software de edición; su segunda edición se publicó en 2011. En los años 2000, SVG Tiny y SVG Basic se centraron en dispositivos limitados y móviles hasta que la compatibilidad completa en navegadores estuvo más extendida. La compatibilidad nativa en navegadores se hizo más común a lo largo de los años 2000 y 2010, eliminando de forma habitual la necesidad de un plugin para mostrar archivos SVG en sitios web. Las actualizaciones de SVG 2 incluyen la actualización de la especificación, así como la integración de parte del formato con CSS, HTML y otros aspectos de la plataforma web en general. SVG sigue siendo un estándar abierto en el W3C y se usa para multitud de iconos, logotipos, gráficos de datos, servicios de mapas, ilustraciones y elementos gráficos de interfaces de usuario de sitios web. El formato comprimido SVGZ usa gzip para su compresión y una extensión de archivo diferente: .svgz.

Un archivo SVG que está comprimido mediante gzip se etiqueta con el sufijo de archivo ".svgz". Normalmente acaba conservando su sufijo original ".svgz", porque muchos programas y navegadores usan esta pista para activar la descompresión automática del archivo cuando corresponde. Este archivo consumirá menos almacenamiento en disco que la versión ".svg", pero no será tan cómodo para la revisión visual directa y la edición desde un editor de texto. ".png": imágenes raster con compresión sin pérdida y compatibilidad con transparencia: elige ".png" para tamaño fijo, capturas de pantalla o UIs, y compatibilidad universal, pero no esperes que admita el escalado editable de la rasterización. JPG/.JPEG: imágenes bitmap con pérdida, de calidad fotográfica. Úsalo para capturas de cámara. No lo uses para logotipos nítidos ni iconos con requisitos de transparencia. WEBP/AVIF son también formatos de archivo de imagen raster bitmap más recientes para una codificación eficiente de diseños bitmap complejos; sin embargo, las líneas y los diseños vectoriales simples deberían preferirse en formato "SVG" en su lugar.

Archivos ".pdf": para la distribución impresa del diseño en un formato de documento intercambiable y multipágina; EPS: formato basado en imágenes vectoriales; carece de la interactividad web actualizada y de la transparencia compatibles en archivos ".SVG": los archivos "ai" propietarios de Adobe son mejores para preservar las opciones de edición vectorial y la funcionalidad proporcionada por Adobe Illustrator que un archivo SVG. DXF - descripción de geometría CAD.

Comentarios (0)

Respondiendo a

Aún no hay comentarios. Sé el primero en compartir tu experiencia con este tipo de archivo.