{"id":954,"date":"2020-07-22T17:29:00","date_gmt":"2020-07-22T17:29:00","guid":{"rendered":"https:\/\/martagonzalez.dev\/?p=954"},"modified":"2026-05-28T20:04:10","modified_gmt":"2026-05-28T18:04:10","slug":"graficos-svg-tus-aliados-en-la-web","status":"publish","type":"post","link":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/","title":{"rendered":"Gr\u00e1ficos SVG, tus aliados en la Web"},"content":{"rendered":"
<\/div>
<\/div><\/div>\n
\"Gr\u00e1ficos<\/figure>\n\n\n\n

Gr\u00e1ficos SVG, tus aliados en la Web<\/h1>\n\n\n\n

Los gr\u00e1ficos SVG<\/strong> son uno de esos recursos que parecen sencillos a primera vista, pero que pueden marcar una gran diferencia en la calidad visual, el rendimiento y la flexibilidad de una web. Durante mucho tiempo se han utilizado sobre todo para logotipos e iconos, pero su utilidad va mucho m\u00e1s all\u00e1.<\/p>\n\n\n\n

En una web moderna, donde el dise\u00f1o debe adaptarse a m\u00f3viles, tablets, pantallas de alta resoluci\u00f3n y distintos modos de visualizaci\u00f3n, trabajar con im\u00e1genes flexibles no es un detalle menor. Es una decisi\u00f3n t\u00e9cnica y visual importante.<\/p>\n\n\n\n

A diferencia de formatos como JPG o PNG, los SVG no se construyen a partir de p\u00edxeles, sino de vectores. Esto significa que pueden ampliarse o reducirse sin perder nitidez. Por eso son especialmente \u00fatiles para iconos, logotipos, ilustraciones simples, gr\u00e1ficos, patrones decorativos, mapas o elementos de interfaz<\/strong>.<\/p>\n\n\n\n

Adem\u00e1s, al estar basados en c\u00f3digo, los SVG pueden integrarse con HTML, CSS y JavaScript. Esto abre la puerta a personalizaciones, animaciones, cambios de color, adaptaci\u00f3n a temas visuales y reutilizaci\u00f3n dentro de sistemas de dise\u00f1o.<\/p>\n\n\n\n

Ahora bien, usar SVG no significa autom\u00e1ticamente mejorar una web. Como ocurre con cualquier recurso frontend, conviene entender cu\u00e1ndo utilizarlo, c\u00f3mo optimizarlo y qu\u00e9 errores evitar. En este art\u00edculo veremos qu\u00e9 son los gr\u00e1ficos SVG, cu\u00e1les son sus principales ventajas y desventajas, c\u00f3mo insertarlos correctamente en una p\u00e1gina web y qu\u00e9 buenas pr\u00e1cticas conviene aplicar.<\/p>\n\n\n\n

Qu\u00e9 son los gr\u00e1ficos SVG<\/h2>\n\n\n\n

SVG significa Scalable Vector Graphics<\/em>, es decir, gr\u00e1ficos vectoriales escalables. Se trata de un formato basado en XML que permite describir im\u00e1genes mediante formas, l\u00edneas, curvas, colores, textos y coordenadas.<\/p>\n\n\n\n

Mientras una imagen JPG o PNG guarda informaci\u00f3n en forma de p\u00edxeles, un SVG describe la imagen mediante instrucciones. El navegador interpreta esas instrucciones y dibuja el resultado en pantalla.<\/p>\n\n\n\n

Por ejemplo, un c\u00edrculo en SVG puede escribirse as\u00ed:<\/p>\n\n\n\n

<svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n  <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#CC2B5E\" \/>\n<\/svg>\n<\/code><\/pre>\n\n\n\n
Este fragmento genera un c\u00edrculo. Lo interesante es que ese c\u00edrculo puede mostrarse en diferentes tama\u00f1os sin perder definici\u00f3n, porque no depende de una resoluci\u00f3n fija.<\/p>\n\n\n\n
Esta es la gran diferencia entre una imagen vectorial y una imagen rasterizada. Si ampliamos demasiado una imagen basada en p\u00edxeles, tarde o temprano aparecer\u00e1 el t\u00edpico efecto borroso o pixelado. En cambio, un SVG se recalcula y se redibuja, manteniendo sus bordes limpios.<\/p>\n\n\n\n
SVG frente a PNG, JPG y otros formatos<\/h3>\n\n\n\n
Para elegir bien un formato de imagen, no conviene pensar en t\u00e9rminos absolutos. SVG no es mejor que PNG o JPG en todos los casos. Cada formato tiene su funci\u00f3n.<\/p>\n\n\n\n
Un archivo JPG suele ser adecuado para fotograf\u00edas, im\u00e1genes realistas, fondos con muchas texturas y composiciones con gran cantidad de colores. Su compresi\u00f3n est\u00e1 pensada para este tipo de contenido.<\/p>\n\n\n\n
Un archivo PNG funciona bien cuando necesitamos transparencia, bordes definidos o gr\u00e1ficos rasterizados con zonas planas de color. Durante a\u00f1os ha sido muy habitual en iconos, capturas de pantalla y elementos visuales con fondo transparente.<\/p>\n\n\n\n
Un SVG, en cambio, es especialmente \u00fatil cuando la imagen puede representarse mediante formas. Por eso encaja tan bien en logotipos, iconos, gr\u00e1ficos vectoriales, ilustraciones simples y elementos decorativos.<\/p>\n\n\n\n
La pregunta m\u00e1s \u00fatil antes de elegir un formato ser\u00eda: \u00bfesta imagen funciona mejor como p\u00edxeles o como formas?<\/strong><\/p>\n\n\n\n
Si hablamos de una fotograf\u00eda de producto, probablemente tenga m\u00e1s sentido usar JPG, WebP o AVIF. Si hablamos de un icono de b\u00fasqueda, una flecha, un logotipo o una ilustraci\u00f3n plana, SVG suele ser una opci\u00f3n mucho m\u00e1s flexible.<\/p>\n\n\n\n
Ventajas de usar SVG en la web<\/h2>\n\n\n\n
Los SVG ofrecen muchas ventajas en desarrollo web, pero su mayor valor aparece cuando se usan con intenci\u00f3n. No se trata de cambiar todos los recursos gr\u00e1ficos por SVG, sino de identificar en qu\u00e9 casos aportan m\u00e1s que otros formatos.<\/p>\n\n\n\n
Escalabilidad sin p\u00e9rdida de calidad<\/h3>\n\n\n\n
La principal ventaja de SVG es su capacidad para escalar sin perder calidad. Esto resulta especialmente importante en interfaces responsive, donde un mismo recurso puede mostrarse en tama\u00f1os muy diferentes.<\/p>\n\n\n\n
Un logotipo puede aparecer peque\u00f1o en la cabecera m\u00f3vil, m\u00e1s grande en el footer y mucho m\u00e1s destacado en una secci\u00f3n hero. Si est\u00e1 en SVG, mantendr\u00e1 la nitidez en todos esos contextos.<\/p>\n\n\n\n
Esto tambi\u00e9n ayuda en pantallas de alta densidad de p\u00edxeles. Con im\u00e1genes rasterizadas, muchas veces necesitamos versiones en distintas resoluciones para evitar que se vean borrosas. Con SVG, normalmente basta con un \u00fanico archivo bien construido.<\/p>\n\n\n\n
Esta ventaja conecta directamente con una idea importante de dise\u00f1o web: la interfaz debe adaptarse al contexto de uso. Si te interesa profundizar en esa parte, tambi\u00e9n puedes leer el art\u00edculo sobre navegaci\u00f3n m\u00f3vil y patrones para mejorar la experiencia de usuario.<\/p>\n\n\n\n
Archivos ligeros en iconos e ilustraciones simples<\/h3>\n\n\n\n
Cuando un gr\u00e1fico es sencillo, un archivo SVG puede ser muy ligero. Un icono formado por unas pocas rutas suele pesar menos que varias versiones PNG del mismo recurso.<\/p>\n\n\n\n
Esto puede contribuir a reducir el peso total de una p\u00e1gina, mejorar la carga y facilitar el mantenimiento de los recursos visuales.<\/p>\n\n\n\n
Ahora bien, esta ventaja no siempre se cumple. Un SVG exportado directamente desde una herramienta de dise\u00f1o puede contener metadatos innecesarios, grupos vac\u00edos, estilos repetidos o rutas demasiado complejas.<\/p>\n\n\n\n
Por eso es importante optimizar los SVG antes de subirlos a producci\u00f3n. Un SVG limpio puede ser un gran aliado. Un SVG mal exportado puede convertirse en un archivo pesado y dif\u00edcil de mantener.<\/p>\n\n\n\n
Integraci\u00f3n con CSS y JavaScript<\/h3>\n\n\n\n
Una de las caracter\u00edsticas m\u00e1s interesantes de SVG es que puede integrarse muy bien con CSS y JavaScript, especialmente cuando se inserta directamente en el HTML como SVG inline.<\/p>\n\n\n\n
Esto permite modificar colores, tama\u00f1os, estados, animaciones o comportamientos sin necesidad de crear m\u00faltiples archivos.<\/p>\n\n\n\n
Por ejemplo:<\/p>\n\n\n\n
<svg class=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n  <path d=\"M12 2L2 22h20L12 2z\" \/>\n<\/svg>\n<\/code><\/pre>\n\n\n\n
.icon {\n  width: 2rem;\n  height: 2rem;\n  fill: currentColor;\n}\n<\/code><\/pre>\n\n\n\n
La propiedad currentColor<\/code> permite que el icono herede el color del texto. Esto es muy \u00fatil en botones, enlaces, men\u00fas y componentes reutilizables.<\/p>\n\n\n\n
As\u00ed, un mismo icono puede adaptarse a distintos estados visuales, como hover, active, modo oscuro o variaciones de color dentro de un sistema de dise\u00f1o.<\/p>\n\n\n\n
Si est\u00e1s trabajando la parte visual de una interfaz, este enfoque puede combinar muy bien con t\u00e9cnicas CSS m\u00e1s avanzadas, como las que explico en el art\u00edculo sobre c\u00f3mo hacer un texto m\u00e1scara sobre una imagen.<\/p>\n\n\n\n
Coherencia visual en sistemas de dise\u00f1o<\/h3>\n\n\n\n
Los SVG son especialmente \u00fatiles cuando trabajamos con sistemas de dise\u00f1o. Permiten crear bibliotecas de iconos y recursos gr\u00e1ficos consistentes, con tama\u00f1os, grosores, colores y estilos controlados.<\/p>\n\n\n\n
En un proyecto frontend, esto ayuda a mantener una interfaz m\u00e1s ordenada y coherente. No es lo mismo utilizar iconos descargados de distintas fuentes, con estilos mezclados, que trabajar con una colecci\u00f3n SVG alineada con la identidad visual del producto.<\/p>\n\n\n\n
Adem\u00e1s, cuando los SVG se convierten en componentes, por ejemplo en React, pueden recibir propiedades para cambiar el tama\u00f1o, el color o el t\u00edtulo accesible.<\/p>\n\n\n\n
function IconArrow({ size = 24, title = \"Flecha\" }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      role=\"img\"\n      aria-label={title}\n    >\n      <path d=\"M5 12h14M13 6l6 6-6 6\" \/>\n    <\/svg>\n  );\n}\n<\/code><\/pre>\n\n\n\n
Este enfoque permite reutilizar iconos de forma m\u00e1s limpia y mantener el c\u00f3digo m\u00e1s organizado.<\/p>\n\n\n\n
Posibilidades de animaci\u00f3n<\/h3>\n\n\n\n
Los SVG tambi\u00e9n pueden animarse. Es posible modificar el color, la opacidad, la posici\u00f3n, el trazo, el relleno o incluso simular que una l\u00ednea se dibuja progresivamente.<\/p>\n\n\n\n
Esto permite crear microinteracciones, loaders, gr\u00e1ficos din\u00e1micos o ilustraciones animadas.<\/p>\n\n\n\n
Por ejemplo, una animaci\u00f3n sencilla de trazo puede dar la sensaci\u00f3n de que un icono se est\u00e1 dibujando:<\/p>\n\n\n\n
.path {\n  stroke-dasharray: 100;\n  stroke-dashoffset: 100;\n  animation: draw 1.5s ease forwards;\n}\n\n@keyframes draw {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n<\/code><\/pre>\n\n\n\n
Eso s\u00ed, conviene recordar algo importante: no todo lo que se puede animar deber\u00eda animarse<\/strong>. El movimiento en una interfaz debe tener una intenci\u00f3n clara. Puede ayudar a dar feedback, guiar la atenci\u00f3n o hacer m\u00e1s comprensible un cambio de estado, pero tambi\u00e9n puede a\u00f1adir ruido.<\/p>\n\n\n\n
Si quieres ampliar esta idea, puedes leer la gu\u00eda b\u00e1sica sobre animaciones CSS, donde explico c\u00f3mo usar el movimiento de forma m\u00e1s clara y accesible.<\/p>\n\n\n\n
Desventajas y limitaciones del uso de SVG<\/h2>\n\n\n\n
Aunque los SVG tienen muchas ventajas, tambi\u00e9n tienen limitaciones. Utilizarlos sin criterio puede generar problemas de rendimiento, accesibilidad, mantenimiento o seguridad.<\/p>\n\n\n\n
No son adecuados para fotograf\u00edas<\/h3>\n\n\n\n
SVG no es el formato adecuado para fotograf\u00edas ni im\u00e1genes muy complejas.<\/p>\n\n\n\n
Una fotograf\u00eda contiene miles o millones de variaciones de color, textura, luz y detalle. Si intentamos convertirla en SVG, el resultado puede ser un archivo enorme, dif\u00edcil de editar y poco eficiente.<\/p>\n\n\n\n
En estos casos, suele ser mucho m\u00e1s recomendable utilizar formatos como JPG, WebP o AVIF, dependiendo de las necesidades del proyecto.<\/p>\n\n\n\n
SVG funciona mejor cuando la imagen es gr\u00e1fica, no fotogr\u00e1fica.<\/p>\n\n\n\n
Pueden ser pesados si son demasiado complejos<\/h3>\n\n\n\n
Un SVG puede ser muy ligero, pero tambi\u00e9n puede volverse pesado si contiene demasiadas rutas, filtros, m\u00e1scaras, sombras o efectos complejos.<\/p>\n\n\n\n
Esto ocurre con frecuencia cuando exportamos desde herramientas de dise\u00f1o sin revisar el resultado. El archivo puede incluir informaci\u00f3n innecesaria, capas ocultas, nombres internos, estilos duplicados o demasiados decimales en las coordenadas.<\/p>\n\n\n\n
Antes de subir un SVG a producci\u00f3n, es recomendable limpiarlo y optimizarlo. De esta forma, reducimos su peso y evitamos que el archivo contenga informaci\u00f3n que no aporta nada al resultado final.<\/p>\n\n\n\n
Pueden generar riesgos de seguridad<\/h3>\n\n\n\n
Un SVG no es solo una imagen. Al estar basado en XML, puede contener c\u00f3digo, enlaces, scripts o comportamientos que conviene controlar.<\/p>\n\n\n\n
Por eso hay que tener especial cuidado cuando se permite subir SVG desde fuentes externas o usuarios no verificados. En gestores de contenido como WordPress, la subida de SVG suele estar restringida por motivos de seguridad.<\/p>\n\n\n\n
La regla general es clara: no insertes SVG de origen desconocido sin revisarlo o sanitizarlo antes<\/strong>.<\/p>\n\n\n\n
En un proyecto profesional, los SVG deben tratarse como c\u00f3digo. Igual que revisar\u00edas un fragmento JavaScript antes de integrarlo, tambi\u00e9n conviene revisar un SVG antes de publicarlo.<\/p>\n\n\n\n
Pueden estar mal implementados a nivel de accesibilidad<\/h3>\n\n\n\n
Los SVG pueden ser accesibles, pero no lo son autom\u00e1ticamente. Todo depende de c\u00f3mo se usen.<\/p>\n\n\n\n
Si un SVG es decorativo, lo habitual es ocultarlo a los lectores de pantalla:<\/p>\n\n\n\n
<svg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 24 24\">\n  <!-- contenido del icono -->\n<\/svg>\n<\/code><\/pre>\n\n\n\n
En cambio, si el SVG transmite informaci\u00f3n relevante, necesita un nombre accesible. Para ello podemos usar role=\"img\"<\/code> junto con aria-label<\/code>, o incluir un elemento <title><\/code> dentro del propio SVG.<\/p>\n\n\n\n
<svg role=\"img\" aria-labelledby=\"icon-title\" viewBox=\"0 0 24 24\">\n  <title id=\"icon-title\">Icono de b\u00fasqueda<\/title>\n  <path d=\"...\" \/>\n<\/svg>\n<\/code><\/pre>\n\n\n\n
Uno de los errores m\u00e1s habituales es usar botones con solo un icono visual, pero sin texto ni etiqueta accesible. Por ejemplo, un bot\u00f3n con una lupa puede ser evidente para una persona que ve la interfaz, pero no para quien navega con lector de pantalla.<\/p>\n\n\n\n
<button aria-label=\"Buscar\">\n  <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\">\n    <!-- icono -->\n  <\/svg>\n<\/button>\n<\/code><\/pre>\n\n\n\n
En este caso, el nombre accesible lo tiene el bot\u00f3n. El SVG solo acompa\u00f1a visualmente.<\/p>\n\n\n\n
Este tipo de decisiones tiene mucho que ver con la usabilidad general de una web. Si te interesa este tema, puedes complementar la lectura con el art\u00edculo sobre qu\u00e9 es la usabilidad web y c\u00f3mo facilitar la navegaci\u00f3n del usuario.<\/p>\n\n\n\n
C\u00f3mo insertar SVG en HTML<\/h2>\n\n\n\n
Existen varias formas de utilizar SVG en una p\u00e1gina web. La mejor opci\u00f3n depende del contexto, del nivel de control que necesites y de c\u00f3mo est\u00e9 organizado tu proyecto.<\/p>\n\n\n\n
Usar SVG como imagen externa<\/h3>\n\n\n\n
La forma m\u00e1s sencilla de insertar un SVG es usar la etiqueta img<\/code>.<\/p>\n\n\n\n
<img src=\"\/images\/logo.svg\" alt=\"Nombre de la marca\" \/>\n<\/code><\/pre>\n\n\n\n
Este m\u00e9todo es limpio y f\u00e1cil de mantener. Funciona muy bien para logotipos, ilustraciones o recursos que no necesitan manipularse internamente con CSS o JavaScript.<\/p>\n\n\n\n
La ventaja es que el SVG se comporta como una imagen normal. La desventaja es que no puedes modificar f\u00e1cilmente sus partes internas desde el CSS de la p\u00e1gina.<\/p>\n\n\n\n
Insertar SVG inline<\/h3>\n\n\n\n
Otra opci\u00f3n es pegar el c\u00f3digo SVG directamente dentro del HTML.<\/p>\n\n\n\n
<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n  <path d=\"M12 2L2 22h20L12 2z\" \/>\n<\/svg>\n<\/code><\/pre>\n\n\n\n
Este enfoque da mucho m\u00e1s control. Permite cambiar colores, animar partes concretas, modificar estados y trabajar con el SVG como parte del DOM.<\/p>\n\n\n\n
Es muy \u00fatil para iconos de interfaz, componentes reutilizables y animaciones. Sin embargo, si se abusa de SVG inline, el HTML puede crecer demasiado y volverse menos manejable.<\/p>\n\n\n\n
Usar sprites SVG<\/h3>\n\n\n\n
Los sprites SVG permiten agrupar varios iconos en un solo archivo y reutilizarlos mediante symbol<\/code> y use<\/code>.<\/p>\n\n\n\n
<svg style=\"display: none;\">\n  <symbol id=\"icon-search\" viewBox=\"0 0 24 24\">\n    <path d=\"...\" \/>\n  <\/symbol>\n<\/svg>\n\n<svg aria-hidden=\"true\">\n  <use href=\"#icon-search\" \/>\n<\/svg>\n<\/code><\/pre>\n\n\n\n
Este enfoque puede ser \u00fatil en proyectos con muchos iconos, aunque requiere organizaci\u00f3n. En proyectos actuales, muchas veces se sustituye por bibliotecas de componentes o colecciones de iconos integradas en el frontend.<\/p>\n\n\n\n
Buenas pr\u00e1cticas para trabajar con SVG<\/h2>\n\n\n\n
Para que los gr\u00e1ficos SVG sean realmente \u00fatiles, conviene aplicar algunas buenas pr\u00e1cticas desde el principio.<\/p>\n\n\n\n
Optimiza los SVG antes de publicarlos<\/h3>\n\n\n\n
No todos los SVG exportados desde herramientas de dise\u00f1o est\u00e1n listos para producci\u00f3n. Antes de utilizarlos, revisa si contienen metadatos innecesarios, rutas demasiado complejas, estilos duplicados o dimensiones poco flexibles.<\/p>\n\n\n\n
Un SVG optimizado ser\u00e1 m\u00e1s ligero, m\u00e1s f\u00e1cil de mantener y m\u00e1s adecuado para una web r\u00e1pida.<\/p>\n\n\n\n
Esta idea conecta con una regla b\u00e1sica del SEO t\u00e9cnico: una p\u00e1gina m\u00e1s ligera y mejor estructurada suele ofrecer una experiencia m\u00e1s fluida. Si est\u00e1s trabajando la optimizaci\u00f3n general de tu sitio, tambi\u00e9n puede interesarte el art\u00edculo sobre SEO on page para posicionar tu web en Google.<\/p>\n\n\n\n
Usa correctamente el atributo viewBox<\/h3>\n\n\n\n
El atributo viewBox<\/code> es fundamental para que un SVG sea escalable y responsive. Define el sistema de coordenadas interno del gr\u00e1fico.<\/p>\n\n\n\n
<svg viewBox=\"0 0 100 100\">\n  <!-- contenido -->\n<\/svg>\n<\/code><\/pre>\n\n\n\n
Gracias al viewBox<\/code>, el SVG puede adaptarse a diferentes tama\u00f1os sin deformarse. Si un SVG no escala como esperas, revisar este atributo suele ser uno de los primeros pasos.<\/p>\n\n\n\n
Evita dimensiones r\u00edgidas cuando no sean necesarias<\/h3>\n\n\n\n
En muchos casos, es mejor controlar el tama\u00f1o del SVG desde CSS en lugar de dejarlo cerrado con valores fijos de width<\/code> y height<\/code>.<\/p>\n\n\n\n
.icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n<\/code><\/pre>\n\n\n\n
Esto facilita que el SVG se adapte a diferentes componentes, tama\u00f1os de texto y contextos visuales.<\/p>\n\n\n\n
Usa currentColor para iconos<\/h3>\n\n\n\n
Cuando un icono debe heredar el color del texto, currentColor<\/code> es una soluci\u00f3n muy pr\u00e1ctica.<\/p>\n\n\n\n
.icon {\n  fill: currentColor;\n}\n<\/code><\/pre>\n\n\n\n
Esto permite que el mismo icono funcione en botones, enlaces, estados hover, modo oscuro y diferentes temas visuales sin necesidad de duplicar archivos.<\/p>\n\n\n\n
Cuida el contraste y la legibilidad<\/h3>\n\n\n\n
Que un icono est\u00e9 en SVG no significa que sea autom\u00e1ticamente usable. Si el contraste entre el icono y el fondo es bajo, muchas personas pueden tener dificultades para verlo.<\/p>\n\n\n\n
Esto es especialmente importante en botones, men\u00fas, avisos, formularios y elementos interactivos. Un buen SVG no solo debe verse bonito. Tambi\u00e9n debe ser claro.<\/p>\n\n\n\n
SVG, rendimiento y SEO<\/h2>\n\n\n\n
Los SVG pueden ayudar al rendimiento de una web, pero no lo hacen por arte de magia. Todo depende del tipo de gr\u00e1fico, de c\u00f3mo est\u00e9 construido y de c\u00f3mo se integre en la p\u00e1gina.<\/p>\n\n\n\n
Cu\u00e1ndo SVG puede mejorar el rendimiento<\/h3>\n\n\n\n
SVG puede mejorar el rendimiento cuando sustituye a im\u00e1genes rasterizadas pesadas en elementos simples. Por ejemplo, un icono PNG en varias resoluciones puede reemplazarse por un \u00fanico SVG limpio y escalable.<\/p>\n\n\n\n
Tambi\u00e9n puede evitar la necesidad de cargar diferentes versiones de una misma imagen para distintos dispositivos o densidades de pantalla.<\/p>\n\n\n\n
En una estrategia frontend bien pensada, esto ayuda a reducir duplicidades y simplificar la gesti\u00f3n de recursos visuales.<\/p>\n\n\n\n
Cu\u00e1ndo SVG puede perjudicar el rendimiento<\/h3>\n\n\n\n
SVG puede perjudicar el rendimiento si contiene demasiadas rutas, filtros complejos, sombras, m\u00e1scaras o animaciones innecesarias.<\/p>\n\n\n\n
Los filtros SVG pueden ser costosos si se aplican sobre \u00e1reas grandes o si se animan constantemente. Tambi\u00e9n hay que tener cuidado con repetir muchos SVG inline en una misma p\u00e1gina, porque pueden aumentar el tama\u00f1o del HTML.<\/p>\n\n\n\n
La idea no es usar SVG siempre, sino usarlo cuando realmente aporta valor.<\/p>\n\n\n\n
SVG y posicionamiento SEO<\/h3>\n\n\n\n
Los SVG pueden contribuir indirectamente al SEO si ayudan a que la p\u00e1gina sea m\u00e1s r\u00e1pida, clara y accesible. Sin embargo, no conviene verlos como una t\u00e9cnica milagrosa de posicionamiento.<\/p>\n\n\n\n
Para SEO, lo importante sigue siendo que el contenido est\u00e9 bien estructurado, que las im\u00e1genes tengan sentido dentro del contexto, que los recursos no ralenticen la carga y que la informaci\u00f3n importante no quede escondida dentro de elementos visuales dif\u00edciles de interpretar.<\/p>\n\n\n\n
Si usas un SVG como imagen, cuida el atributo alt<\/code>. Si es decorativo, no lo sobrecargues con texto innecesario. Si transmite informaci\u00f3n relevante, aseg\u00farate de que esa informaci\u00f3n tambi\u00e9n pueda entenderse fuera del elemento visual.<\/p>\n\n\n\n
Casos de uso recomendados para SVG<\/h2>\n\n\n\n
SVG es especialmente \u00fatil en varios escenarios habituales del desarrollo web.<\/p>\n\n\n\n
Iconos de interfaz<\/h3>\n\n\n\n
Los iconos son uno de los casos de uso m\u00e1s claros. Botones, men\u00fas, enlaces, tarjetas, etiquetas y estados de interfaz pueden beneficiarse de iconos SVG escalables y f\u00e1ciles de personalizar.<\/p>\n\n\n\n
Adem\u00e1s, al poder adaptarse mediante CSS, encajan muy bien en componentes reutilizables.<\/p>\n\n\n\n
Logotipos<\/h3>\n\n\n\n
Un logotipo en SVG mantiene su nitidez en cualquier tama\u00f1o. Puede verse bien tanto en una cabecera peque\u00f1a como en una secci\u00f3n destacada o en una pantalla de alta resoluci\u00f3n.<\/p>\n\n\n\n
Tambi\u00e9n permite crear versiones adaptadas a distintos fondos o temas visuales.<\/p>\n\n\n\n
Ilustraciones simples<\/h3>\n\n\n\n
Las ilustraciones con formas planas, colores definidos y pocos detalles funcionan muy bien en SVG. Son habituales en secciones hero, p\u00e1ginas de error, bloques explicativos, empty states o pantallas de onboarding.<\/p>\n\n\n\n
Gr\u00e1ficos y visualizaciones<\/h3>\n\n\n\n
SVG tambi\u00e9n se utiliza en gr\u00e1ficos de datos, diagramas, mapas y visualizaciones interactivas. Permite representar elementos de forma precisa y manipularlos din\u00e1micamente.<\/p>\n\n\n\n
Patrones y fondos decorativos<\/h3>\n\n\n\n
Ondas, l\u00edneas, puntos, formas geom\u00e9tricas y patrones pueden crearse en SVG para dar personalidad visual a una interfaz sin depender de im\u00e1genes pesadas.<\/p>\n\n\n\n
Cu\u00e1ndo no deber\u00edas usar SVG<\/h2>\n\n\n\n
Aunque SVG sea un formato muy \u00fatil, hay situaciones en las que no es la mejor opci\u00f3n.<\/p>\n\n\n\n
No deber\u00edas usar SVG para fotograf\u00edas reales, im\u00e1genes con mucho detalle, texturas complejas o composiciones con miles de variaciones de color. En esos casos, un formato rasterizado optimizado suele ser m\u00e1s adecuado.<\/p>\n\n\n\n
Tampoco conviene usar SVG si el archivo resultante es m\u00e1s pesado que una alternativa en WebP, AVIF, JPG o PNG. La decisi\u00f3n debe basarse en el tipo de imagen y en el rendimiento real.<\/p>\n\n\n\n
Adem\u00e1s, si no tienes control sobre el origen del SVG, es importante revisarlo antes de integrarlo. Un SVG descargado de cualquier sitio o subido por usuarios debe sanitizarse antes de publicarse.<\/p>\n\n\n\n
Errores comunes al trabajar con SVG<\/h2>\n\n\n\n
Uno de los errores m\u00e1s frecuentes es exportar desde una herramienta de dise\u00f1o y subir el SVG tal cual, sin optimizarlo. Esto puede a\u00f1adir peso innecesario y dificultar el mantenimiento.<\/p>\n\n\n\n
Otro error habitual es usar SVG inline para todo. Aunque este m\u00e9todo ofrece mucho control, no siempre es necesario. A veces, una simple etiqueta img<\/code> es m\u00e1s que suficiente.<\/p>\n\n\n\n
Tambi\u00e9n es com\u00fan olvidar la accesibilidad. Un icono decorativo anunciado por un lector de pantalla puede generar ruido. Un icono funcional sin nombre accesible puede impedir que una persona complete una acci\u00f3n.<\/p>\n\n\n\n
Por \u00faltimo, otro error frecuente es usar SVG solo como recurso est\u00e9tico, sin pensar en su funci\u00f3n dentro de la interfaz. Un gr\u00e1fico visualmente bonito aporta poco si no ayuda a entender mejor la p\u00e1gina o a mejorar la experiencia.<\/p>\n\n\n\n
Preguntas frecuentes sobre gr\u00e1ficos SVG<\/h2>\n\n\n\n
\u00bfSVG es mejor que PNG?<\/h3>\n\n\n\n
No siempre. SVG suele ser mejor para iconos, logotipos, ilustraciones simples y gr\u00e1ficos vectoriales que necesitan escalar sin perder calidad.<\/p>\n\n\n\n
PNG puede ser m\u00e1s adecuado para im\u00e1genes rasterizadas, capturas o gr\u00e1ficos con transparencia que no necesitan manipulaci\u00f3n vectorial.<\/p>\n\n\n\n
La elecci\u00f3n depende del tipo de imagen, del peso del archivo y del uso dentro de la interfaz.<\/p>\n\n\n\n
\u00bfLos SVG son buenos para el SEO?<\/h3>\n\n\n\n
Pueden serlo de forma indirecta. Un SVG optimizado puede ayudar a mejorar el rendimiento, la claridad visual y la accesibilidad de una p\u00e1gina.<\/p>\n\n\n\n
Pero el SEO no depende solo del formato de imagen. Tambi\u00e9n importan la estructura del contenido, la velocidad de carga, los textos alternativos, la intenci\u00f3n de b\u00fasqueda y la experiencia de usuario.<\/p>\n\n\n\n
\u00bfEs seguro subir SVG a WordPress?<\/h3>\n\n\n\n
Depende de c\u00f3mo se gestione. SVG puede contener c\u00f3digo, por lo que permitir subidas sin control puede suponer un riesgo de seguridad.<\/p>\n\n\n\n
Si necesitas usar SVG en WordPress, es recomendable hacerlo con una configuraci\u00f3n segura, limitar qui\u00e9n puede subir estos archivos y sanitizarlos antes de publicarlos.<\/p>\n\n\n\n
En general, conviene tratar los SVG como c\u00f3digo, no como simples im\u00e1genes.<\/p>\n\n\n\n
SVG no es solo un formato, es una decisi\u00f3n de dise\u00f1o<\/h2>\n\n\n\n
Los gr\u00e1ficos SVG<\/strong> son una herramienta muy valiosa para la web moderna. Permiten crear interfaces m\u00e1s n\u00edtidas, flexibles, escalables y adaptables. Son especialmente \u00fatiles para iconos, logotipos, ilustraciones, gr\u00e1ficos y elementos visuales que deben mantener su calidad en diferentes tama\u00f1os y dispositivos.<\/p>\n\n\n\n
Pero su verdadero valor no est\u00e1 solo en la tecnolog\u00eda. Est\u00e1 en saber cu\u00e1ndo usarlos, c\u00f3mo optimizarlos y c\u00f3mo integrarlos de forma responsable.<\/p>\n\n\n\n
Un SVG bien utilizado puede mejorar el rendimiento, reforzar la identidad visual de una marca y facilitar la creaci\u00f3n de sistemas de dise\u00f1o m\u00e1s coherentes. Un SVG mal utilizado puede a\u00f1adir peso innecesario, generar problemas de accesibilidad o introducir riesgos de seguridad.<\/p>\n\n\n\n
Por eso, la pregunta no deber\u00eda ser simplemente: \u201c\u00bfuso SVG o no?\u201d. La pregunta m\u00e1s \u00fatil ser\u00eda: \u00bfeste recurso visual se beneficia realmente de ser vectorial, escalable, editable y accesible?<\/strong><\/p>\n\n\n\n
Si la respuesta es s\u00ed, SVG puede convertirse en uno de tus mejores aliados en la web.<\/p>\n\n\n\n
Porque al final, desarrollar una buena interfaz no consiste solo en elegir tecnolog\u00edas modernas. Consiste en tomar decisiones que hagan que la experiencia sea m\u00e1s clara, m\u00e1s r\u00e1pida, m\u00e1s flexible y m\u00e1s f\u00e1cil de usar.<\/p>\n\n\n\n
Y en ese equilibrio entre dise\u00f1o, rendimiento y accesibilidad, los SVG tienen mucho que aportar.<\/p>\n","protected":false},"excerpt":{"rendered":"
Los SVG (Scalable Vector Graphics) son un tipo de formato basado en vectores, por lo que es ideal para la web responsive, ya que ofrece una mayor flexibilidad y reducci\u00f3n del tiempo de carga sin p\u00e9rdida de calidad.<\/p>\n","protected":false},"author":1,"featured_media":16489,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"mg_rating_sum":0,"mg_rating_count":0,"mg_rating_average":0,"footnotes":""},"categories":[82,72,15],"tags":[11,20,19],"class_list":["post-954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-desarrollo-a-medida","category-diseno-web","tag-desarrollo-web","tag-graficos-vectoriales","tag-svg"],"acf":[],"yoast_head":"\nSVG en desarrollo web: ventajas y usos pr\u00e1cticos<\/title>\n<meta name=\"description\" content=\"Gr\u00e1ficos SVG, por qu\u00e9 son ideales para la web responsive y c\u00f3mo pueden mejorar calidad visual, rendimiento y escalabilidad.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gr\u00e1ficos SVG, tus aliados en la Web\" \/>\n<meta property=\"og:description\" content=\"Gr\u00e1ficos SVG, por qu\u00e9 son ideales para la web responsive y c\u00f3mo pueden mejorar calidad visual, rendimiento y escalabilidad.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Marta Gonz\u00e1lez - Desarrollo Front-end\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-22T17:29:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-28T18:04:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2020\/07\/graficos-svg-tus-aliados-en-ala-web.avif\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"marta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"marta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/\"},\"author\":{\"name\":\"marta\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"headline\":\"Gr\u00e1ficos SVG, tus aliados en la Web\",\"datePublished\":\"2020-07-22T17:29:00+00:00\",\"dateModified\":\"2026-05-28T18:04:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/\"},\"wordCount\":3729,\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/graficos-svg-tus-aliados-en-ala-web.avif\",\"keywords\":[\"Desarrollo Web\",\"gr\u00e1ficos vectoriales\",\"svg\"],\"articleSection\":[\"Blog\",\"Desarrollo a medida\",\"Dise\u00f1o web\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/\",\"name\":\"SVG en desarrollo web: ventajas y usos pr\u00e1cticos\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/graficos-svg-tus-aliados-en-ala-web.avif\",\"datePublished\":\"2020-07-22T17:29:00+00:00\",\"dateModified\":\"2026-05-28T18:04:10+00:00\",\"description\":\"Gr\u00e1ficos SVG, por qu\u00e9 son ideales para la web responsive y c\u00f3mo pueden mejorar calidad visual, rendimiento y escalabilidad.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/graficos-svg-tus-aliados-en-ala-web.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/graficos-svg-tus-aliados-en-ala-web.avif\",\"width\":1536,\"height\":1024,\"caption\":\"Ilustraci\u00f3n para martagonalez.dev sobre las ventajas de los gr\u00e1ficos SVG en la web, con una ventana de navegador y tres tarjetas de iconos.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/graficos-svg-tus-aliados-en-la-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gr\u00e1ficos SVG, tus aliados en la Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\",\"name\":\"Marta Gonz\u00e1lez\",\"description\":\"Desarrollo Front-end\",\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"alternateName\":\"Marta Gonz\u00e1lez Desarrollo Frontend\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\",\"name\":\"marta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"width\":575,\"height\":575,\"caption\":\"marta\"},\"logo\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\"},\"description\":\"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.\",\"sameAs\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\",\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=100031998110346\",\"https:\\\/\\\/www.instagram.com\\\/mcgweb\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/martacg\\\/\",\"marta\"],\"birthDate\":\"1986-01-07\",\"gender\":\"mujer\",\"knowsAbout\":[\"HTML5\",\"CSS3\",\"Javascript\"],\"jobTitle\":\"Desarrollo Frontend\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/author\\\/marta\\\/\",\"publishingPrinciples\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/politica-de-privacidad\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SVG en desarrollo web: ventajas y usos pr\u00e1cticos","description":"Gr\u00e1ficos SVG, por qu\u00e9 son ideales para la web responsive y c\u00f3mo pueden mejorar calidad visual, rendimiento y escalabilidad.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/","og_locale":"es_ES","og_type":"article","og_title":"Gr\u00e1ficos SVG, tus aliados en la Web","og_description":"Gr\u00e1ficos SVG, por qu\u00e9 son ideales para la web responsive y c\u00f3mo pueden mejorar calidad visual, rendimiento y escalabilidad.","og_url":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/","og_site_name":"Marta Gonz\u00e1lez - Desarrollo Front-end","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_author":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_published_time":"2020-07-22T17:29:00+00:00","article_modified_time":"2026-05-28T18:04:10+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2020\/07\/graficos-svg-tus-aliados-en-ala-web.avif","type":"image\/jpeg"}],"author":"marta","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"marta","Tiempo de lectura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/#article","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/"},"author":{"name":"marta","@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"headline":"Gr\u00e1ficos SVG, tus aliados en la Web","datePublished":"2020-07-22T17:29:00+00:00","dateModified":"2026-05-28T18:04:10+00:00","mainEntityOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/"},"wordCount":3729,"publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2020\/07\/graficos-svg-tus-aliados-en-ala-web.avif","keywords":["Desarrollo Web","gr\u00e1ficos vectoriales","svg"],"articleSection":["Blog","Desarrollo a medida","Dise\u00f1o web"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/","url":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/","name":"SVG en desarrollo web: ventajas y usos pr\u00e1cticos","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/#primaryimage"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2020\/07\/graficos-svg-tus-aliados-en-ala-web.avif","datePublished":"2020-07-22T17:29:00+00:00","dateModified":"2026-05-28T18:04:10+00:00","description":"Gr\u00e1ficos SVG, por qu\u00e9 son ideales para la web responsive y c\u00f3mo pueden mejorar calidad visual, rendimiento y escalabilidad.","breadcrumb":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/#primaryimage","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2020\/07\/graficos-svg-tus-aliados-en-ala-web.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2020\/07\/graficos-svg-tus-aliados-en-ala-web.avif","width":1536,"height":1024,"caption":"Ilustraci\u00f3n para martagonalez.dev sobre las ventajas de los gr\u00e1ficos SVG en la web, con una ventana de navegador y tres tarjetas de iconos."},{"@type":"BreadcrumbList","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/graficos-svg-tus-aliados-en-la-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martagonzalez.dev\/wp\/"},{"@type":"ListItem","position":2,"name":"Gr\u00e1ficos SVG, tus aliados en la Web"}]},{"@type":"WebSite","@id":"https:\/\/martagonzalez.dev\/wp\/#website","url":"https:\/\/martagonzalez.dev\/wp\/","name":"Marta Gonz\u00e1lez","description":"Desarrollo Front-end","publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"alternateName":"Marta Gonz\u00e1lez Desarrollo Frontend","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martagonzalez.dev\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738","name":"marta","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","width":575,"height":575,"caption":"marta"},"logo":{"@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif"},"description":"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.","sameAs":["https:\/\/martagonzalez.dev\/wp","https:\/\/www.facebook.com\/profile.php?id=100031998110346","https:\/\/www.instagram.com\/mcgweb","https:\/\/www.linkedin.com\/in\/martacg\/","marta"],"birthDate":"1986-01-07","gender":"mujer","knowsAbout":["HTML5","CSS3","Javascript"],"jobTitle":"Desarrollo Frontend","url":"https:\/\/martagonzalez.dev\/wp\/author\/marta\/","publishingPrinciples":"https:\/\/martagonzalez.dev\/wp\/politica-de-privacidad\/"}]}},"_links":{"self":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/comments?post=954"}],"version-history":[{"count":2,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/954\/revisions"}],"predecessor-version":[{"id":19311,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/954\/revisions\/19311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media\/16489"}],"wp:attachment":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media?parent=954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/categories?post=954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/tags?post=954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}