{"id":31743,"date":"2024-11-12T12:39:32","date_gmt":"2024-11-12T12:39:32","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31743"},"modified":"2025-06-24T08:39:40","modified_gmt":"2025-06-24T08:39:40","slug":"svg-scalable-vector-graphics","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/svg-scalable-vector-graphics","title":{"rendered":"SVG (Gr\u00e1ficos vectoriales escalables)"},"content":{"rendered":"

\u00bfQu\u00e9 son los SVGs o Gr\u00e1ficos Vectoriales Escalables?<\/span><\/h2>\n
\n
\"Gr\u00e1ficos<\/a> <\/p>\n
Imag.:<\/b> Gr\u00e1ficos vect. escalables – Autor: Seobility – Licencia: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Los SVGs (por sus siglas del ingl\u00e9s \u201cScalable Vector Graphics\u201d) o gr\u00e1ficos vectoriales escalables representan un est\u00e1ndar utilizado para la descripci\u00f3n de gr\u00e1ficos bidimensionales, basado en el formato de lenguaje extensible o XML. Su principal uso es el de describir objetos (gr\u00e1ficos o animaciones) para que puedan ser escalados, sin que pierdan su calidad.\n<\/p>\n

Aunque, en un principio, muchos navegadores web ten\u00edan problemas para mostrar contenidos SVG, hoy en d\u00eda los navegadores m\u00e1s importantes son capaces de mostrar gr\u00e1ficos vectoriales escalables sin problemas.\n<\/p>\n

De hecho, en la actualidad, muchos programas de edici\u00f3n como Adobe Illustrator o de c\u00f3digo abierto como Inkscape, ofrecen el formato de gr\u00e1ficos vectoriales SVG, lo que facilita la descripci\u00f3n de un gr\u00e1fico vectorial o una animaci\u00f3n cuando se codifica o muestra en un navegador web.\n<\/p>\n

Desde un punto de vista m\u00e1s t\u00e9cnico, los archivos SVG est\u00e1n definidos por una estructura de \u00e1rbol compuesta por elementos individuales, as\u00ed, tal y como ocurre con un archivo CSS, a estos elementos tambi\u00e9n se les asignan atributos. De esta forma, como los SVGs est\u00e1n basados en la sintaxis XML, cada archivo comienza con un dato estructurado (XML) y una declaraci\u00f3n Doctype<\/a>.\n<\/p>\n

XML es un lenguaje de marcado<\/a> que se utiliza, principalmente, para representar datos estructurados jer\u00e1rquicamente en formato de archivo de texto, por lo que una de sus ventajas primarias es que pueden ser le\u00eddos e interpretados tanto por m\u00e1quinas como por humanos.\n<\/p>\n

Todo este concepto fue publicado por primera vez en 2001 por un grupo de trabajo del Consorcio World Wide Web (W3C).\n<\/p>\n

\u00bfC\u00f3mo crear un gr\u00e1fico SVG?<\/span><\/h2>\n

Dado que los gr\u00e1ficos vectoriales escalables son un formato de vectorizaci\u00f3n, la mayor\u00eda de las personas los crean en programas como Adobe Illustrator.\n<\/p>\n

Por ello y gracias al formato, estos vectores se pueden editar con la mayor\u00eda de los efectos que programas como Illustrator ofrecen para la personalizaci\u00f3n vectorial. Eso s\u00ed, es importante considerar que muchos de los degradados complejos de varios niveles, pueden mostrarse diferente en los distintos navegadores web.\n<\/p>\n

Tambi\u00e9n es importante definir cada elemento de ruta o <path> de forma clara y precisa durante su creaci\u00f3n, ya que incluso los cambios m\u00ednimos pueden generar franjas de color visibles en los navegadores, especialmente, cuando los gr\u00e1ficos SVG se llevan a escala.\n<\/p>\n

Si bien, los SVGs representan un formato vectorial escalable, se debe prestar atenci\u00f3n a las cuadr\u00edculas de p\u00edxeles al crear estos gr\u00e1ficos en Adobe Illustrator. Para ello, este programa de edici\u00f3n introdujo una manera de alinear los p\u00edxeles, la cual permite ajustar el comportamiento de los elementos individuales cuando se escalan o se mueven, evitando las franjas de color indeseadas.\n<\/p>\n

Igualmente, lo m\u00e1s conveniente es crear una imagen SVG del mismo tama\u00f1o en que se utilizar\u00e1 posteriormente, por ejemplo, en un website porque, aunque las dimensiones del gr\u00e1fico no influyen en el tama\u00f1o del archivo, los resultados de visualizaci\u00f3n en los navegadores son mejores.\n<\/p>\n

Por otro lado, para utilizar un gr\u00e1fico vectorial creado de forma externa con Adobe Illustrator, por ejemplo, en un sitio web, lo primero ser\u00e1 exportar el archivo en formato SVG o como elemento del c\u00f3digo fuente.\n<\/p>\n

La primera opci\u00f3n es la m\u00e1s f\u00e1cil para exportar los gr\u00e1ficos, esto se logra seleccionando los elementos correspondientes para copiarlos en el portapapeles a trav\u00e9s de las opciones: \u201cEditar> Copiar\u201d. Luego, se pueden pegar los c\u00f3digos SVG en la p\u00e1gina HTML.\n<\/p>\n

La segunda forma de hacerlo es mediante la exportaci\u00f3n y guardado en formato SVG directamente desde el programa. Para hacerlo, se cliquea en la opci\u00f3n \u00abArchivo\u00bb y luego en \u00abExportar\u00bb, seguidamente, se despliega un men\u00fa que permite seleccionar el formato de \u00abGr\u00e1fico vectorial escalable (.svg)\u00bb para guardar.\n<\/p>\n

Ventajas de los gr\u00e1ficos vectoriales escalables<\/span><\/h2>\n

El formato SVG ofrece numerosas ventajas sobre otros formatos de imagen en el desarrollo web moderno.\n<\/p>\n

Por ejemplo, es compacto, se basa en vectores e incluso es modificable a trav\u00e9s de editores de texto, pues sigue siendo XML.\n<\/p>\n

Como estamos hablando de vectores, se pueden escalar a cualquier tama\u00f1o sin que pierdan su calidad original, siendo ideal para el dise\u00f1o responsivo<\/a>, ya que todos los elementos de una p\u00e1gina HTML se pueden ajustar a las diferentes pantallas de los dispositivos.\n<\/p>\n

Precisamente, esto \u00faltimo suele ser problem\u00e1tico cuando se emplean los formatos tradicionales de las im\u00e1genes como JPEG o PNG, pues afectan la resoluci\u00f3n y pueden granular el contenido de la imagen. Si bien, al escalar las fotos m\u00e1s all\u00e1 del 100 % no se percibe una disminuci\u00f3n excesiva de la calidad, los logos s\u00ed pueden verse pixelados y sucios cuando se escalan. En cambio, cuando se emplean los gr\u00e1ficos vectoriales, siempre se visualizan claros y n\u00edtidos.\n<\/p>\n

Otra gran ventaja del formato SVG es su integraci\u00f3n con las media queries CSS<\/a>, pues los dise\u00f1os desarrollados como parte del dise\u00f1o responsive se pueden adaptar autom\u00e1ticamente al tama\u00f1o de la pantalla (viewport<\/a>) a trav\u00e9s de las media queries CSS.\n<\/p>\n

Por lo tanto, los gr\u00e1ficos SVG se pueden integrar en los elementos HTML y controlarse mediante las media queries CSS para que se adapten al ancho de la ventana del navegador.\n<\/p>\n

Adem\u00e1s, como los gr\u00e1ficos vectoriales con m\u00e1s detalle no se pueden mostrar correctamente en pantallas con baja densidad de p\u00edxeles, las desarrolladoras y desarrolladores, as\u00ed como las dise\u00f1adoras y dise\u00f1adores pueden, sencillamente, ocultar los detalles innecesarios a trav\u00e9s de la manipulaci\u00f3n del c\u00f3digo CSS.\n<\/p>\n

Ampliar conocimientos<\/span><\/h2>\n