{"id":49610,"date":"2024-09-23T07:00:00","date_gmt":"2024-09-23T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=49610"},"modified":"2025-10-07T13:45:40","modified_gmt":"2025-10-07T20:45:40","slug":"crear-y-usar-archivos-svg-sitio-web","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/","title":{"rendered":"Dominando SVG: C\u00f3mo Crear Y Usar Archivos SVG en Tu Sitio Web"},"content":{"rendered":"\n<p>Algunas personas dicen que Elvis Presley fue el mejor artista de todos los tiempos.&nbsp;<\/p>\n\n\n\n<p>Nosotros decimos que el formato de archivo SVG es un fuerte competidor.<\/p>\n\n\n\n<p>Ver\u00e1s, Elvis siempre cumpl\u00eda. Su mantra personal era &#8220;Taking care of business&#8221; (Haciendo negocios), abreviado como TCB en su joyer\u00eda.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"756\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01-Elvis-TCB-1024x756.png\" alt=\"Fotograf\u00eda de Elvis en la boda de George Klein luciendo su collar TCB\" class=\"wp-image-49611 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01-Elvis-TCB-1024x756.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01-Elvis-TCB-300x221.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01-Elvis-TCB-768x567.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01-Elvis-TCB-1536x1134.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/01-Elvis-TCB-600x443.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/01-Elvis-TCB-1200x886.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/01-Elvis-TCB-730x539.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/01-Elvis-TCB-1460x1078.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/01-Elvis-TCB-784x579.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/01-Elvis-TCB-1568x1157.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/01-Elvis-TCB-877x647.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/01-Elvis-TCB.png.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/756;\" \/><\/figure>\n\n\n\n<p><br><a target=\"_blank\" href=\"https:\/\/www.instagram.com\/p\/BwM33HqHAlW\/?utm_source=ig_share_sheet&amp;igshid=1nnclixqrf4j5&amp;epik=dj0yJnU9bkY2dFlnaEMwZmEtYjJobzRwdXUtSGUwYW9OTTJ6ci0mcD0wJm49Qkw3U3hPRkNwalYyQmJaZGg0blhkQSZ0PUFBQUFBR2JROTVj\">Fuente<\/a><\/p>\n\n\n\n<p>Y podr\u00edas decir lo mismo de los archivos SVG.&nbsp;<\/p>\n\n\n\n<p>No importa en qu\u00e9 proyecto est\u00e9s trabajando, este formato de imagen har\u00e1 el trabajo. Estos archivos son ligeros, escalables y excelentes para la <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/volver-tu-pagina-web-accesible\/\">accesibilidad<\/a>. Incluso puedes editarlos usando c\u00f3digo.<\/p>\n\n\n\n<p>\u00bfA\u00fan necesitas m\u00e1s razones? En esta gu\u00eda f\u00e1cil de leer, echamos un vistazo m\u00e1s de cerca al formato SVG y te explicamos c\u00f3mo usar estos archivos en tus propios proyectos.<\/p>\n\n\n\n<p>\u00bfListo para comenzar? \u00a1Menos conversaci\u00f3n, m\u00e1s acci\u00f3n!<\/p>\n\n\n\n<h2 id=\"h-el-abc-de-los-svg-entendiendo-los-archivos-de-imagen\" class=\"wp-block-heading\">El ABC de los SVG: Entendiendo los Archivos de Imagen<\/h2>\n\n\n\n<p>Supongamos que est\u00e1s construyendo un sitio web. Probablemente vas a querer algunas im\u00e1genes.<\/p>\n\n\n\n<p>\u00bfQu\u00e9 tipo de archivo deber\u00edas usar?<\/p>\n\n\n\n<p>Tu instinto podr\u00eda decirte JPEG o PNG. Tal vez te atrevas y a\u00f1adas algunos GIF.&nbsp;<\/p>\n\n\n<p><iframe class=\"giphy-embed lazyload\" data-src=\"https:\/\/giphy.com\/embed\/l0IyqqiSuoOFBdZ7i\" width=\"327\" height=\"480\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\"><\/iframe><\/p>\n<p><a target=\"_blank\"href=\"https:\/\/giphy.com\/gifs\/chuber-bears-elvis-l0IyqqiSuoOFBdZ7i\">via GIPHY<\/a><\/p>\n\n\n<p>Pero\u2026 \u00bfcu\u00e1l es la diferencia? Aqu\u00ed tienes una comparaci\u00f3n de los sospechosos habituales:<\/p>\n\n\n\n<p><strong>JPEG (Joint Photographic Experts Group)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ventajas<\/strong>: Tama\u00f1os de archivo m\u00e1s peque\u00f1os, ideal para im\u00e1genes complejas.<\/li>\n\n\n\n<li><strong>Desventajas<\/strong>: Pierde calidad al comprimirse, no admite transparencia.<\/li>\n<\/ul>\n\n\n\n<p><strong>PNG (Portable Network Graphics)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ventajas<\/strong>: Compresi\u00f3n sin p\u00e9rdida, admite transparencia.<\/li>\n\n\n\n<li><strong>Desventajas<\/strong>: Archivos m\u00e1s grandes que los JPEG.<\/li>\n<\/ul>\n\n\n\n<p><strong>GIF (Graphics Interchange Format)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ventajas<\/strong>: Admite animaciones simples, tama\u00f1o de archivo peque\u00f1o.<\/li>\n\n\n\n<li><strong>Desventajas<\/strong>: Colores limitados, pueden verse pixelados.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdAvcTd5MhF9KeR5RQ__80BOM-5rEVsOLhGcssyZ0013Zkq9PCABVXVy8QnLtAI5mWNESrX9JSAhfe6xZ15ANJatDoYTRnIvDUEaBlcoArX9VUn541ZiFM0PYV7inVlHsjccQ0F2pc2ADYgbe_U-NxXWSc?key=pwSS9r9JvWyxEja6S9XSow\" alt=\"La misma imagen de una tostada con mantequilla de man\u00ed y pl\u00e1tano. La primera es una imagen JPEG que muestra pixelaci\u00f3n cuando se ampl\u00eda, luego una PNG que est\u00e1 menos pixelada y luego una GIF que gira continuamente.\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Estos formatos pueden parecer diversos. Sin embargo, todos son ejemplos de im\u00e1genes r\u00e1ster.<\/p>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/formas-optimizar-imagenes-para-web\/\">Las im\u00e1genes r\u00e1ster (o de mapa de bits)<\/a> est\u00e1n compuestas por p\u00edxeles colocados con precisi\u00f3n. Tienen dimensiones, colores y formas fijas.<\/p>\n\n\n\n<p>Estos tipos de archivos son excelentes para compartir im\u00e1genes con muchos detalles, como <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/como-crear-sitio-web-portafolio-fotografia\/\">fotos de alta calidad<\/a>.<\/p>\n\n\n\n<p>El inconveniente es que nunca puedes cambiar o estirar la imagen original. Solo puedes pintar sobre ella o agregar m\u00e1s p\u00edxeles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-por-que-los-svg-son-tan-utiles\">Por Qu\u00e9 los SVG Son Tan utiles<\/h3>\n\n\n\n<p>El formato SVG (Scalable Vector Graphics) es diferente.&nbsp;<\/p>\n\n\n\n<p>Los archivos vectoriales contienen un conjunto de instrucciones de texto sobre c\u00f3mo construir una imagen. Estos archivos est\u00e1n escritos en XML (Lenguaje de Marcado Extensible).<\/p>\n\n\n\n<p>Cuando intentas cargar un archivo SVG, tu dispositivo revisa las instrucciones y construye la imagen en tiempo real.<\/p>\n\n\n\n<p>Hay varias ventajas en este sistema:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Los SVG pueden <strong>escalarse a cualquier tama\u00f1o<\/strong> y seguir vi\u00e9ndose perfectos.<\/li>\n\n\n\n<li>Tambi\u00e9n se pueden <strong>editar como archivos de c\u00f3digo<\/strong>.<\/li>\n\n\n\n<li>Incluso puedes <strong>estilizarlos utilizando CSS<\/strong>.<\/li>\n\n\n\n<li>Como los SVG est\u00e1n hechos de texto, <strong>tienen tama\u00f1os de archivo muy peque\u00f1os<\/strong>.<\/li>\n\n\n\n<li>Esto significa que ocupan <strong>menos espacio de almacenamiento<\/strong> en tu servidor web.<\/li>\n\n\n\n<li>Y pueden <strong>cargar m\u00e1s r\u00e1pido<\/strong> que los gr\u00e1ficos r\u00e1ster.<\/li>\n<\/ul>\n\n\n\n<p>Otro beneficio de usar SVG es la<strong> mejora en la accesibilidad<\/strong>. Puedes ajustar estos archivos localmente en los dispositivos, de acuerdo a las necesidades del usuario, y los lectores de pantalla pueden interpretarlos.<\/p>\n\n\n\n<p>El inconveniente de los SVG es que pueden volverse muy grandes si incluyes muchos detalles. Adem\u00e1s, no puedes optimizarlos de la misma manera que las im\u00e1genes r\u00e1ster. Si deseas compartir fotograf\u00edas, probablemente sea mejor usar un JPEG.<\/p>\n\n\n\n<p>Pero para la mayor\u00eda del contenido visual, el formato SVG es una opci\u00f3n s\u00f3lida.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Caracter\u00edstica<\/strong><\/td><td><strong>SVG<\/strong><\/td><td><strong>JPEG<\/strong><\/td><td><strong>PNG<\/strong><\/td><td><strong>GIF<\/strong><\/td><\/tr><tr><td>Escalabilidad<\/td><td>Fuerte \u2705<\/td><td>No \u274c<\/td><td>No \u274c<\/td><td>No \u274c<\/td><\/tr><tr><td>Tama\u00f1o de archivo<\/td><td>Generalmente peque\u00f1o \u2705<\/td><td>Puede ser peque\u00f1o \u2705<\/td><td>A menudo grande \u274c<\/td><td>Peque\u00f1o para im\u00e1genes simples \u2705<\/td><\/tr><tr><td>Transparencia<\/td><td>S\u00ed&nbsp; \u2705<\/td><td>No \u274c<\/td><td>S\u00ed \u2705<\/td><td>S\u00ed, pero limitada \u26a0\ufe0f<\/td><\/tr><tr><td>Animaci\u00f3n<\/td><td>\u00a1Claro que s\u00ed! ?<\/td><td>No \u274c<\/td><td>No \u274c<\/td><td>Solo b\u00e1sica \u26a0\ufe0f<\/td><\/tr><tr><td>Best for<\/td><td>Gr\u00e1ficos, \u00edconos, logos<\/td><td>Fotos<\/td><td>Im\u00e1genes que necesiten transparencia<\/td><td>Animaciones simples<\/td><\/tr><tr><td>Editabilidad<\/td><td>\u00a1Con c\u00f3digo! ?<\/td><td>No \u274c<\/td><td>No \u274c<\/td><td>No \u274c<\/td><\/tr><tr><td>Compatibilidad con navegadores<\/td><td>La mayor\u00eda de navegadores modernos \u2705<\/td><td>Todos los navegadores\u2705<\/td><td>Todos los navegadores \u2705<\/td><td>Todos los navegadores \u2705<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-usos-comunes-para-imagenes-svg\">Usos Comunes Para Im\u00e1genes SVG<\/h3>\n\n\n\n<p>Aunque los SVG son bastante vers\u00e1tiles, suelen aparecer en el dise\u00f1o web como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00cdconos<\/strong>: Desde enlaces a redes sociales hasta botones de carrito de compras, los \u00edconos SVG se ven n\u00edtidos en cualquier dispositivo.<\/li>\n\n\n\n<li><strong>Logos<\/strong>: Guardar el <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/hacer-logo-en-linea-gratis\/\">logo de tu marca<\/a> como un SVG asegura que se ver\u00e1 perfecto en todas partes, desde pantallas m\u00f3viles peque\u00f1as hasta vallas publicitarias gigantes.<\/li>\n\n\n\n<li><strong>Ilustraciones<\/strong>: Muchos sitios web ahora usan ilustraciones en SVG en lugar de im\u00e1genes de archivo. Incluso cuando los gr\u00e1ficos son muy detallados, se escalan a la perfecci\u00f3n.<\/li>\n\n\n\n<li><strong>Animaciones<\/strong>: \u00a1S\u00ed, los SVG pueden moverse! Puedes animarlos para darle un toque extra a tu sitio web, como un logo giratorio o un personaje danzante.<\/li>\n\n\n\n<li><strong>Infograf\u00edas<\/strong>: Dado que los SVG son escalables, tambi\u00e9n puedes usarlos para crear <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/galeria-plantillas-exploraciones-ga4\/\">visualizaciones de datos<\/a> interactivas. \u00a1Muy genial!<\/li>\n<\/ul>\n\n\n\n<h2 id=\"h-trabajar-con-svgs-crear-o-copiar\" class=\"wp-block-heading\">Trabajar con SVGs: \u00bfCrear o copiar?<\/h2>\n\n\n\n<p>Bien, ya basta de alabanzas. Es hora de ponerse manos a la obra.<\/p>\n\n\n\n<p>Si quieres integrar SVGs en tus proyectos digitales, necesitas conseguir algunos dise\u00f1os ya hechos o crear tus propios gr\u00e1ficos desde cero.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-encontrar-svgs-gratuitos\">Encontrar SVGs Gratuitos<\/h3>\n\n\n\n<p>Usar los dise\u00f1os de otros es la opci\u00f3n m\u00e1s f\u00e1cil. Y, por suerte, hay miles de SVGs disponibles para descargar en l\u00ednea.<\/p>\n\n\n\n<p>Muchos son gratuitos para proyectos personales, pero es posible que debas pagar por su uso comercial.<\/p>\n\n\n\n<p>Aqu\u00ed est\u00e1n algunos de nuestros recursos favoritos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a target=\"_blank\" href=\"https:\/\/fontawesome.com\/\">Font Awesome<\/a>: Un popular paquete de \u00edconos SVG.<\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.freepik.com\/\">Freepik<\/a>: Enorme base de datos de gr\u00e1ficos vectoriales, ilustraciones e \u00edconos.<\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/lineicons.com\/\">Lineicons<\/a>: Paquete de m\u00e1s de 8,400 \u00edconos limpios y simples.<\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/freesvg.org\/\">Free SVG<\/a>: Biblioteca de ilustraciones SVG completamente gratuitas.&nbsp;<\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.opendoodles.com\/\">Open Doodles<\/a>: Ilustraciones coloridas y gratuitas de personas, con estilo de personajes.<\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/iconscout.com\/\">IconScout<\/a>: Biblioteca con m\u00e1s de 9.5 millones de recursos, incluidos \u00edconos, ilustraciones, logos y m\u00e1s (gratuitos y de pago).<\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.drawkit.com\/\">DrawKit<\/a>: M\u00faltiples paquetes de ilustraciones 2D\/3D, gratis y premium.<\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/undraw.co\/illustrations\">unDraw<\/a>: Gran cantidad de ilustraciones SVG gratuitas.<\/li>\n<\/ul>\n\n\n\n<p>Recuerda que puedes editar cualquier SVG que descargues. As\u00ed que puedes usar archivos gratuitos como punto de partida para tus propias creaciones.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-como-crear-y-editar-archivos-svg\" class=\"wp-block-heading\">C\u00f3mo Crear y Editar Archivos SVG<\/h2>\n\n\n\n<p>\u00bfNo encuentras lo que necesitas en l\u00ednea? No te preocupes. Editar SVGs es pan comido.<\/p>\n\n\n\n<p>Aqu\u00ed tienes una gu\u00eda r\u00e1pida:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-elige-tu-software\">1.Elige Tu Software<\/h3>\n\n\n\n<p>La manera m\u00e1s sencilla de editar SVGs es con un editor de gr\u00e1ficos vectoriales. Aqu\u00ed hay algunas opciones populares:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adobe Illustrator<\/strong> ($$$): El campe\u00f3n pesado. Caro, pero potente.<\/li>\n\n\n\n<li><strong>Inkscape<\/strong> (gratis): La alternativa gratuita que no decepciona.<\/li>\n\n\n\n<li><strong>Figma<\/strong> ($): Genial para trabajos de dise\u00f1o colaborativo.<\/li>\n\n\n\n<li><strong>Sketch<\/strong> ($): Una alternativa m\u00e1s ligera a Illustrator, popular entre los dise\u00f1adores de interfaces.<\/li>\n<\/ul>\n\n\n\n<p>Nos basaremos en <strong>Inkscape<\/strong> para el resto de esta gu\u00eda, pero el proceso es muy similar en la mayor\u00eda de las aplicaciones de edici\u00f3n de vectores.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-configura-tu-lienzo\">2. Configura Tu Lienzo<\/h3>\n\n\n\n<p>Si est\u00e1s empezando desde cero, necesitar\u00e1s crear un lienzo para tu trabajo. En Inkscape, ve a <strong>Archivo &gt; Nuevo<\/strong> y elige las dimensiones para tu nueva imagen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"653\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03-Configura-tu-lienzo-1024x653.jpg\" alt=\"Captura de pantalla de la opci\u00f3n &quot;Nueva&quot; ubicada en Archivo en el men\u00fa de navegaci\u00f3n superior\" class=\"wp-image-49613 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03-Configura-tu-lienzo-1024x653.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03-Configura-tu-lienzo-300x191.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03-Configura-tu-lienzo-768x490.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03-Configura-tu-lienzo-1536x979.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/03-Configura-tu-lienzo-600x383.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/03-Configura-tu-lienzo-1200x765.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/03-Configura-tu-lienzo-730x465.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/03-Configura-tu-lienzo-1460x931.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/03-Configura-tu-lienzo-784x500.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/03-Configura-tu-lienzo-1568x1000.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/03-Configura-tu-lienzo-877x559.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/03-Configura-tu-lienzo.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/653;\" \/><\/figure>\n\n\n\n<p>Si quieres editar un documento SVG existente, ve a <strong>Archivo &gt; Abrir<\/strong> para activar el editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-dibuja-tu-diseno\">3. Dibuja Tu Dise\u00f1o<\/h3>\n\n\n\n<p>La herramienta m\u00e1s importante en la edici\u00f3n de vectores es la herramienta <strong>Bezier<\/strong>. Puedes seleccionarla desde la barra de herramientas en la parte izquierda de tu espacio de trabajo. El \u00edcono parece una pluma estilogr\u00e1fica dibujando una l\u00ednea curva.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"690\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04-Dibuja-tu-diseno-1024x690.jpg\" alt=\"Ubicaci\u00f3n de la captura de pantalla de la herramienta Bezier que parece un bol\u00edgrafo de tinta junto a una l\u00ednea dibujada\" class=\"wp-image-49615 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04-Dibuja-tu-diseno-1024x690.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04-Dibuja-tu-diseno-300x202.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04-Dibuja-tu-diseno-768x517.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/04-Dibuja-tu-diseno-600x404.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/04-Dibuja-tu-diseno-1200x808.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/04-Dibuja-tu-diseno-730x492.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/04-Dibuja-tu-diseno-784x528.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/04-Dibuja-tu-diseno-877x591.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/04-Dibuja-tu-diseno.jpg.webp 1219w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/690;\" \/><\/figure>\n\n\n\n<p>Esta herramienta te permite crear l\u00edneas rectas y curvas perfectas con unos pocos clics.<\/p>\n\n\n\n<p>Cada forma que creas contiene caminos y puntos individuales, que se registran en el c\u00f3digo XML subyacente.<\/p>\n\n\n\n<p>Usando la herramienta Bezier, puedes volver f\u00e1cilmente y ajustar estos puntos y caminos despu\u00e9s de haberlos creado.<\/p>\n\n\n\n<p>Una vez que est\u00e9s satisfecho con la estructura, agrega tus <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/esquemas-de-color-para-tu-proximo-proyecto-web\/\">propios colores<\/a> a trav\u00e9s del panel de <strong>Propiedades de objeto<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"690\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05-Objetivos-1024x690.jpg\" alt=\"Barra de navegaci\u00f3n superior con men\u00fa desplegable de &quot;Objeto&quot; a &quot;Propiedades del objeto&quot;\" class=\"wp-image-49617 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05-Objetivos-1024x690.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05-Objetivos-300x202.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05-Objetivos-768x517.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/05-Objetivos-600x404.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/05-Objetivos-1200x808.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/05-Objetivos-730x492.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/05-Objetivos-784x528.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/05-Objetivos-877x591.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/05-Objetivos.jpg.webp 1219w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/690;\" \/><\/figure>\n\n\n\n<p>Las opciones de propiedades de objetos aparecer\u00e1n en el men\u00fa a mano derecha.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06-Propiedades-de-objetivos-1024x576.jpg\" alt=\"Captura de pantalla del men\u00fa de propiedades del objeto ahora abierto en el men\u00fa de la derecha que muestra variaciones de color y patr\u00f3n.\" class=\"wp-image-49619 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06-Propiedades-de-objetivos-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06-Propiedades-de-objetivos-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06-Propiedades-de-objetivos-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06-Propiedades-de-objetivos-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/06-Propiedades-de-objetivos-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/06-Propiedades-de-objetivos-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/06-Propiedades-de-objetivos-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/06-Propiedades-de-objetivos-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/06-Propiedades-de-objetivos-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/06-Propiedades-de-objetivos-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/06-Propiedades-de-objetivos-877x493.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/06-Propiedades-de-objetivos.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/576;\" \/><\/figure>\n\n\n\n<p><strong>Consejo profesional:<\/strong> \u00bfQuieres profundizar en la edici\u00f3n de vectores? Inkscape tiene una incre\u00edble biblioteca de tutoriales gratuitos justo <a target=\"_blank\" href=\"https:\/\/inkscape.org\/learn\/tutorials\/\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-guardar-como-svg\">4. Guardar como SVG<\/h3>\n\n\n\n<p>Una vez que est\u00e9s contento con tu gr\u00e1fico, ve a <strong>Archivo &gt; Guardar como<\/strong> y elige SVG como tu formato.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07-Guardar-como-SVG-1024x576.jpg\" alt=\"Men\u00fa desplegable de &quot;archivo&quot; a &quot;abrir&quot;\" class=\"wp-image-49622 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07-Guardar-como-SVG-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07-Guardar-como-SVG-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07-Guardar-como-SVG-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07-Guardar-como-SVG-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/07-Guardar-como-SVG-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/07-Guardar-como-SVG-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/07-Guardar-como-SVG-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/07-Guardar-como-SVG-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/07-Guardar-como-SVG-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/07-Guardar-como-SVG-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/07-Guardar-como-SVG-877x493.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/07-Guardar-como-SVG.jpg.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/576;\" \/><\/figure>\n\n\n\n<p>Dale un nombre genial y \u00a1haz clic en guardar!<\/p>\n\n\n\n<h2 id=\"h-como-agregar-svgs-a-tu-sitio-web\" class=\"wp-block-heading\">C\u00f3mo Agregar SVGs a Tu Sitio Web<\/h2>\n\n\n\n<p>Has creado tu obra maestra vectorial. Ahora, el mundo merece verla.<\/p>\n\n\n\n<p>Puedes incrustar SVGs en el HTML de tu sitio web. Todo lo que necesitas es una etiqueta <strong>&lt;img&gt;<\/strong> que apunte a tu archivo.&nbsp;<\/p>\n\n\n\n<p>Deber\u00eda verse algo as\u00ed:<\/p>\n\n\n\n<p>&lt;img src=&#8221;my-awesome-svg.svg&#8221; alt=&#8221;My Awesome SVG&#8221;&gt;<\/p>\n\n\n\n<p>Alternativamente, puedes insertar el c\u00f3digo XML de tu archivo SVG directamente en tu p\u00e1gina web usando la etiqueta <strong>&lt;svg&gt;<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n\n\n\n<p>&lt;svg width=&#8221;200&#8243; height=&#8221;200&#8243;&gt;<br>&nbsp; &lt;circle cx=&#8221;50&#8243; cy=&#8221;50&#8243; r=&#8221;40&#8243; stroke=&#8221;red&#8221; stroke-width=&#8221;2&#8243; fill=&#8221;green&#8221; \/&gt;<br>&lt;\/svg&gt;<\/p>\n\n\n\n<p>Este c\u00f3digo producir\u00e1 un bot\u00f3n redondo con un borde rojo y un interior verde.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-habilitar-svg-en-wordpress\">Habilitar SVG en WordPress<\/h3>\n\n\n\n<p>Agregar im\u00e1genes individuales mediante HTML puede ser un proceso muy lento. Tal vez prefieras subir SVGs a trav\u00e9s de tu CMS (sistema de gesti\u00f3n de contenido).<\/p>\n\n\n\n<p>Pero hay un problema para los usuarios de WordPress.<\/p>\n\n\n\n<p>De manera predeterminada, WordPress no admite la carga de archivos SVG debido a preocupaciones de seguridad, ya que algunos actores malintencionados pueden usar SVGs para distribuir malware.<\/p>\n\n\n\n<p>La forma m\u00e1s sencilla de habilitar SVGs es instalando un plugin como <a target=\"_blank\" href=\"https:\/\/en-gb.wordpress.org\/plugins\/safe-svg\/\"><strong>Safe SVG<\/strong><\/a> o <a target=\"_blank\" href=\"https:\/\/en-gb.wordpress.org\/plugins\/svg-support\/\"><strong>SVG Support<\/strong><\/a>. Estas herramientas revisan cada carga para asegurarse de que no se oculte nada malicioso dentro.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"539\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08-Safe-SVG-1024x539.png\" alt=\"Captura de pantalla de la pantalla de descarga de Safe SVG\" class=\"wp-image-49625 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08-Safe-SVG-1024x539.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08-Safe-SVG-300x158.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08-Safe-SVG-768x404.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/08-Safe-SVG-600x316.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/08-Safe-SVG-1200x632.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/08-Safe-SVG-730x384.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/08-Safe-SVG-784x413.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/08-Safe-SVG-877x462.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/08-Safe-SVG.png.webp 1362w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/539;\" \/><\/figure>\n\n\n\n<p>Luego puedes cargar e insertar SVGs a trav\u00e9s de la Biblioteca de Medios de WordPress. Simplemente navega a <strong>Medios &gt; A\u00f1adir nuevo<\/strong> y selecciona los gr\u00e1ficos que deseas incluir.<\/p>\n\n\n\n<h2 id=\"h-estilizar-svgs-con-css\" class=\"wp-block-heading\">Estilizar SVGs con CSS<\/h2>\n\n\n\n<p>Si incrustas archivos SVG usando la etiqueta <strong>&lt;svg&gt;<\/strong>, puedes cambiar c\u00f3mo aparecer\u00e1n tus im\u00e1genes utilizando CSS.<\/p>\n\n\n\n<p>Por ejemplo, supongamos que creaste un gr\u00e1fico verde, pero quieres que se vea rojo en tu sitio web. En lugar de crear una copia nueva, solo necesitas escribir el siguiente estilo:<\/p>\n\n\n\n<p>svg {<br>&nbsp; stroke: red;<br>&nbsp; fill: blue;<br>}<\/p>\n\n\n\n<p>El atributo <strong>stroke<\/strong> define el color del borde de tu gr\u00e1fico, mientras que el atributo <strong>fill<\/strong> controla el color dentro de las l\u00edneas.<\/p>\n\n\n\n<p><strong>Consejo profesional:<\/strong> Hay <a target=\"_blank\" href=\"https:\/\/css-tricks.com\/svg-properties-and-css\/\">muchos<\/a> m\u00e1s atributos con los que puedes experimentar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hacer-que-tus-imagenes-svg-sean-responsivas\">Hacer que tus Im\u00e1genes SVG sean Responsivas<\/h3>\n\n\n\n<p>Los archivos SVG son infinitamente escalables, por lo que puedes usarlos en dise\u00f1os responsivos. Solo se requiere un poco de magia con CSS.<\/p>\n\n\n\n<p>Aqu\u00ed tienes una gu\u00eda paso a paso:<\/p>\n\n\n\n<p><strong>1. Inserta tu imagen utilizando la etiqueta <\/strong><strong>&lt;svg&gt;<\/strong><strong>.<\/strong> Esto te permitir\u00e1 hacer cambios a trav\u00e9s de CSS.<\/p>\n\n\n\n<p><strong>Elimina las dimensiones de altura y anchura. <\/strong>Esto forzar\u00e1 a tu SVG a adaptarse a su contenedor. Aseg\u00farate de que la parte del <strong>viewBox<\/strong> permanezca. Deber\u00eda verse algo as\u00ed:<\/p>\n\n\n\n<p>&lt;svg viewBox=&#8221;0 0 20 20&#8243; xmlns=&#8221;https:\/\/example.com\/file.svg&#8221;&gt;<br>&nbsp; &lt;!&#8211; svg content here &#8211;&gt;<br>&lt;\/svg&gt;<\/p>\n\n\n\n<p><strong>3. Establece el tama\u00f1o m\u00e1ximo de tu SVG.<\/strong> Esto evitar\u00e1 que la imagen se desborde fuera de su contenedor. Por ejemplo:<\/p>\n\n\n\n<p>svg {<br>&nbsp; display: inline-block;<br>&nbsp; max-width: 100%;<br>}<\/p>\n\n\n\n<p>\u00a1Y listo!<\/p>\n\n\n\n<p><strong>Consejo profesional:<\/strong> Si todo esto suena un poco t\u00e9cnico, prueba <a target=\"_blank\" href=\"https:\/\/app.zipwp.com\/pricing\/?aff=933feb1e\">ZipWP<\/a>. Es un creador de sitios web impulsado por IA que se encarga del estilo por ti.<\/p>\n\n\n\n<h2 id=\"h-masterclass-de-svg-4-consejos-avanzados\" class=\"wp-block-heading\">Masterclass de SVG: 4 Consejos Avanzados<\/h2>\n\n\n\n<p>Ya hemos cubierto lo b\u00e1sico de crear y compartir SVGs. Para finalizar esta gu\u00eda, veamos algunas t\u00e9cnicas avanzadas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-anima-tus-graficos-svg\">1. Anima Tus Gr\u00e1ficos SVG<\/h3>\n\n\n\n<p>\u00bfSab\u00edas que puedes hacer que tus SVGs se muevan? S\u00ed, la <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/mejora-tu-sitio-web-animaciones-css\/\">animaci\u00f3n<\/a> tambi\u00e9n funciona en este tipo de archivo.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcZwP1dwVYXdSW2RQ7716urkXIxmTANNoGJ-Nb_3jvRyqoDWBkZXio-9LjvygxxiKLP_QMQLA6OSZmoCcNR1N9lxqptGSX50u3Sgi0toY1tt71998do8-CLXxgvmdkZDx-WqQQrGsCeohJod0__ZrDwlZI?key=pwSS9r9JvWyxEja6S9XSow\" alt=\"Animaci\u00f3n simple de un bot\u00f3n de &quot;Carga&quot; que se mueve hacia arriba y hacia abajo sobre un gr\u00e1fico de fondo negro s\u00f3lido.\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Al igual que con la imagen original, puedes animar tus gr\u00e1ficos utilizando c\u00f3digo XML simple. Solo agrega un elemento <strong>&lt;animate&gt;<\/strong><strong> <\/strong>dentro de tu forma para poner las cosas en movimiento.<\/p>\n\n\n\n<p>Deber\u00eda verse algo as\u00ed:<\/p>\n\n\n\n<p>&lt;svg width=&#8221;100%&#8221; height=&#8221;auto&#8221; xmlns=&#8221;https:\/\/example.com\/file.svg&#8221;&gt;<br>&nbsp; &lt;circle cx=&#8221;50&#8243; cy=&#8221;50&#8243; r=&#8221;50&#8243; style=&#8221;fill:red;&#8221;&gt;<br>&nbsp; &nbsp; &lt;animate<br>&nbsp; &nbsp; &nbsp; attributeName=&#8221;cx&#8221;<br>&nbsp; &nbsp; &nbsp; begin=&#8221;0s&#8221;<br>&nbsp; &nbsp; &nbsp; dur=&#8221;5s&#8221;<br>&nbsp; &nbsp; &nbsp; from=&#8221;30&#8243;<br>&nbsp; &nbsp; &nbsp; to=&#8221;90%&#8221;<br>&nbsp; &nbsp; &nbsp; repeatCount=&#8221;indefinite&#8221; \/&gt;<br>&nbsp; &lt;\/circle&gt;<br>&lt;\/svg&gt;<\/p>\n\n\n\n<p>Puedes usar esta t\u00e9cnica para agregar un poco de movimiento a los \u00edconos, crear un indicador de carga de p\u00e1gina o incluso dise\u00f1ar anuncios animados.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-usa-sprites-svg-para-tiempos-de-carga-mas-rapidos\">2. Usa Sprites SVG para Tiempos de Carga M\u00e1s R\u00e1pidos<\/h3>\n\n\n\n<p>Los sprites SVG son como un \u00e1lbum de grandes \u00e9xitos para tus \u00edconos. En lugar de tener docenas de archivos de \u00edconos individuales, los agrupas todos en un solo SVG.<\/p>\n\n\n\n<p>Esto significa que solo necesitas hacer una solicitud HTTP por p\u00e1gina, sin importar cu\u00e1ntos \u00edconos est\u00e9s utilizando. Es una excelente manera de reducir los tiempos de carga y ahorrar ancho de banda.<\/p>\n\n\n\n<p>Hoy en d\u00eda, muchos paquetes de \u00edconos se entregan en forma de sprites. Tambi\u00e9n puedes <a target=\"_blank\" href=\"https:\/\/hackernoon.com\/lang\/es\/como-crear-svg-sprite-con-iconos\">crear los tuyos propios<\/a>.<\/p>\n\n\n\n<p>Para insertar un \u00edcono en particular en tu sitio, simplemente debes localizar el \u00e1rea del archivo sprite donde se guarda ese \u00edcono. Puedes hacerlo con c\u00f3digo CSS b\u00e1sico:<\/p>\n\n\n\n<p>#button {<br>&nbsp; width: 20px;<br>&nbsp; height: 20px;<br>&nbsp; background: url(&#8216;sprite.svg&#8217;) -128px 0;<br>}<\/p>\n\n\n\n<p><strong>Consejo profesional:<\/strong> Recomendamos usar una herramienta en l\u00ednea como <a target=\"_blank\" href=\"https:\/\/www.toptal.com\/developers\/css\/sprite-generator\/\">CSS Sprites Generator<\/a> para calcular las distancias correctas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-optimiza-tus-archivos-svg-para-un-mejor-rendimiento\">3. Optimiza tus Archivos SVG para un Mejor Rendimiento<\/h3>\n\n\n\n<p>Aunque los archivos SVG ya son bastante peque\u00f1os, puedes optimizarlos a\u00fan m\u00e1s para hacerlos m\u00e1s ligeros.<\/p>\n\n\n\n<p>Aqu\u00ed te explicamos c\u00f3mo hacerlo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Usa una herramienta como <\/strong><a target=\"_blank\" href=\"https:\/\/jakearchibald.github.io\/svgomg\/\"><strong>SVGOMG<\/strong><\/a>. S\u00ed, eso es real. Es una excelente aplicaci\u00f3n web que te permite comprimir SVGs sin perder calidad.<\/li>\n\n\n\n<li><strong>Simplifica las rutas cuando sea posible<\/strong>. Las formas complicadas pueden generar grandes cantidades de c\u00f3digo XML. Muchos editores de gr\u00e1ficos vectoriales tienen herramientas para esta tarea (en Inkscape est\u00e1 en <strong>Ruta &gt; Simplificar<\/strong>).<\/li>\n\n\n\n<li><strong>Considera cargar de forma diferida los SVG que est\u00e9n por debajo del pliegue<\/strong>. Al retrasar la carga de im\u00e1genes m\u00e1s abajo en la p\u00e1gina, puedes reducir el impacto de m\u00faltiples im\u00e1genes.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-haz-que-tus-graficos-sean-accesibles\">4. Haz Que Tus Gr\u00e1ficos Sean Accesibles<\/h3>\n\n\n\n<p>Dado que los SVG son archivos basados en texto, son f\u00e1ciles de entender para los lectores de pantalla y otros programas de asistencia.<\/p>\n\n\n\n<p>Dicho esto, todav\u00eda hay pasos que puedes seguir para hacerlos a\u00fan m\u00e1s accesibles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Incluye los elementos <\/strong><strong>&lt;title&gt;<\/strong><strong> y <\/strong><strong>&lt;desc&gt;<\/strong><strong> dentro de tus archivos SVG.<\/strong> Estos proporcionan descripciones del gr\u00e1fico, lo cual es especialmente \u00fatil para los usuarios que dependen de lectores de pantalla.<\/li>\n\n\n\n<li><strong>Agrega el atributo <\/strong><strong>role=&#8221;img&#8221;<\/strong><strong>.<\/strong> Esto informa a las tecnolog\u00edas de asistencia que el SVG es una imagen.<\/li>\n\n\n\n<li><strong>Rellena el atributo <\/strong><strong>aria-labelledby<\/strong>, que debe hacer referencia a los IDs de los elementos &lt;title&gt; y &lt;desc&gt;, vincul\u00e1ndolos como etiquetas para la imagen.<\/li>\n\n\n\n<li><strong>Para SVG m\u00e1s complejos, proporciona texto alternativo (alt text)<\/strong>. Describe la imagen para que los lectores de pantalla tengan menos que interpretar.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"434\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-1024x434.png\" alt=\"Captura de pantalla en paralelo del gr\u00e1fico de carga al mostrar el c\u00f3digo de texto alternativo\" class=\"wp-image-49630 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-1024x434.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-300x127.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-768x325.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-1536x650.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-600x254.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-1200x508.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-730x309.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-1460x618.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-784x332.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-1568x664.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles-877x371.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2024\/09\/09-Has-que-tus-graficos-sean-accesibles.png.webp 1573w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/434;\" \/><\/figure>\n\n\n\n<p>Un beneficio adicional de hacer que los SVG sean s\u00faper accesibles es que tambi\u00e9n los optimizas para la b\u00fasqueda. \u00a1Un triunfo para el SEO!<\/p>\n\n\n\n<h2 id=\"h-cuidando-el-negocio\" class=\"wp-block-heading\">Cuidando el Negocio<\/h2>\n\n\n\n<p>As\u00ed como Elvis cuidaba del negocio en el escenario, los SVG pueden ayudarte a hacer lo mismo en tu sitio web. Estos gr\u00e1ficos vers\u00e1tiles y escalables ofrecen un mundo de posibilidades para dise\u00f1adores y desarrolladores web.<\/p>\n\n\n\n<p>Desde logotipos n\u00edtidos e \u00edconos responsivos hasta animaciones interactivas y visuales accesibles, los SVG son los h\u00e9roes no reconocidos del <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/es\/elementos-de-diseno-web\/\">dise\u00f1o web moderno<\/a>.<\/p>\n\n\n\n<p>Despu\u00e9s de haber le\u00eddo esta gu\u00eda, deber\u00edas sentirte bastante seguro usando SVGs en tus proyectos. Pero, \u00bfest\u00e1 tu hosting a la altura del desaf\u00edo?<\/p>\n\n\n\n<p>Si quieres asegurarte de que tu sitio pueda manejar toneladas de gr\u00e1ficos de alta calidad, considera cambiarte a DreamHost.<\/p>\n\n\n\n<p>Nuestros <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/es\/hosting\/\">planes de hosting<\/a> incluyen ancho de banda ilimitado (excepto en hosting en la nube), lo que significa que no tienes que preocuparte si tu sitio recibe muchos visitantes.<\/p>\n\n\n\n<h2 id=\"h-preguntas-frecuentes-divertidas-sobre-svg\" class=\"wp-block-heading\">Preguntas Frecuentes Divertidas sobre SVG<\/h2>\n\n\n\n<p>Si a\u00fan tienes curiosidad sobre los SVG, est\u00e1 bien. Tenemos m\u00e1s conocimiento para compartir. Aqu\u00ed tienes un resumen r\u00e1pido de algunas preguntas que podr\u00edamos haber pasado por alto:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-como-se-convierte-un-svg-a-jpeg-nbsp\">\u00bfC\u00f3mo se convierte un SVG a JPEG?<strong>&nbsp;<\/strong><\/h3>\n\n\n\n<p>Puedes hacerlo r\u00e1pidamente usando un editor vectorial de escritorio o una herramienta en l\u00ednea como <a target=\"_blank\" href=\"https:\/\/cloudconvert.com\/svg-to-jpg\">CloudConvert<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-puedes-editar-svgs-directamente-en-un-editor-de-texto\">\u00bfPuedes editar SVGs directamente en un editor de texto?<\/h3>\n\n\n\n<p>\u00a1S\u00ed! Los SVG son basados en XML, por lo que puedes modificar su c\u00f3digo directamente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-es-el-svg-mas-claro-que-el-png-nbsp\">\u00bfEs el SVG m\u00e1s claro que el PNG?&nbsp;<\/h3>\n\n\n\n<p>En la mayor\u00eda de los casos, s\u00ed. Esto es especialmente notable si intentas escalar un archivo PNG.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-puedes-editar-svgs-usando-javascript\">\u00bfPuedes editar SVGs usando JavaScript?<\/h3>\n\n\n\n<p>S\u00ed, puedes. Esto es \u00fatil para cambios din\u00e1micos basados en las entradas del usuario.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-son-compatibles-los-svg-en-todos-los-navegadores\">\u00bfSon compatibles los SVG en todos los navegadores?<\/h3>\n\n\n\n<p>Los SVG son compatibles en todos los navegadores web modernos, incluidos Chrome, Firefox, Safari y Edge.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<p><em>Esta p\u00e1gina contiene enlaces de afiliados. Esto significa que podemos ganar una comisi\u00f3n si compras servicios a trav\u00e9s de nuestro enlace, sin ning\u00fan costo adicional para ti.<\/em><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Algunas personas dicen que Elvis Presley fue el mejor artista de todos los tiempos.&nbsp; Nosotros decimos que el formato de archivo SVG es un fuerte competidor. Ver\u00e1s, Elvis siempre cumpl\u00eda. Su mantra personal era &#8220;Taking care of business&#8221; (Haciendo negocios), abreviado como TCB en su joyer\u00eda. Fuente Y podr\u00edas decir lo mismo de los archivos [&hellip;]<\/p>\n","protected":false},"author":1058,"featured_media":49600,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"\u00bfQuieres gr\u00e1ficos n\u00edtidos y claros que hagan que tu sitio web luzca espl\u00e9ndido a cualquier escala? Aprende a crear, optimizar y usar archivos SVG con nuestra gu\u00eda.","toc_headlines":"[[\"h-el-abc-de-los-svg-entendiendo-los-archivos-de-imagen\",\"El ABC de los SVG: Entendiendo los Archivos de Imagen\"],[\"h-trabajar-con-svgs-crear-o-copiar\",\"Trabajar con SVGs: \u00bfCrear o copiar?\"],[\"h-como-crear-y-editar-archivos-svg\",\"C\u00f3mo Crear y Editar Archivos SVG\"],[\"h-como-agregar-svgs-a-tu-sitio-web\",\"C\u00f3mo Agregar SVGs a Tu Sitio Web\"],[\"h-estilizar-svgs-con-css\",\"Estilizar SVGs con CSS\"],[\"h-masterclass-de-svg-4-consejos-avanzados\",\"Masterclass de SVG: 4 Consejos Avanzados\"],[\"h-cuidando-el-negocio\",\"Cuidando el Negocio\"],[\"h-preguntas-frecuentes-divertidas-sobre-svg\",\"Preguntas Frecuentes Divertidas sobre SVG\"]]","hide_toc":false,"footnotes":""},"categories":[12896],"tags":[],"class_list":["post-49610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo Crear y Usar Archivos SVG En Tu Sitio Web - DreamHost<\/title>\n<meta name=\"description\" content=\"\u00bfQuieres gr\u00e1ficos n\u00edtidos y claros que hagan que tu sitio web luzca espl\u00e9ndido a cualquier escala? Aprende a crear, optimizar y usar archivos SVG con nuestra gu\u00eda.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Archivos SVG: Tu Gu\u00eda Para Gr\u00e1ficos Escalables y Claros\" \/>\n<meta property=\"og:description\" content=\"Descubre c\u00f3mo crear y optimizar archivos SVG para obtener visuales impresionantes que se mantengan n\u00edtidos en cualquier tama\u00f1o. Eleva el dise\u00f1o de tu sitio web con gr\u00e1ficos que escalan maravillosamente.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-23T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-07T20:45:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1220-x-628-OGIMAGE-_Working-With-SVG-Files.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1220\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Archivos SVG: Tu Gu\u00eda Para Gr\u00e1ficos Escalables y Claros\" \/>\n<meta name=\"twitter:description\" content=\"Descubre c\u00f3mo crear y optimizar archivos SVG para obtener visuales impresionantes que se mantengan n\u00edtidos en cualquier tama\u00f1o. Eleva el dise\u00f1o de tu sitio web con gr\u00e1ficos que escalan maravillosamente.\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Crear y Usar Archivos SVG En Tu Sitio Web - DreamHost","description":"\u00bfQuieres gr\u00e1ficos n\u00edtidos y claros que hagan que tu sitio web luzca espl\u00e9ndido a cualquier escala? Aprende a crear, optimizar y usar archivos SVG con nuestra gu\u00eda.","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:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/","og_locale":"en_US","og_type":"article","og_title":"Archivos SVG: Tu Gu\u00eda Para Gr\u00e1ficos Escalables y Claros","og_description":"Descubre c\u00f3mo crear y optimizar archivos SVG para obtener visuales impresionantes que se mantengan n\u00edtidos en cualquier tama\u00f1o. Eleva el dise\u00f1o de tu sitio web con gr\u00e1ficos que escalan maravillosamente.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-09-23T14:00:00+00:00","article_modified_time":"2025-10-07T20:45:40+00:00","og_image":[{"width":1220,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1220-x-628-OGIMAGE-_Working-With-SVG-Files.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_title":"Archivos SVG: Tu Gu\u00eda Para Gr\u00e1ficos Escalables y Claros","twitter_description":"Descubre c\u00f3mo crear y optimizar archivos SVG para obtener visuales impresionantes que se mantengan n\u00edtidos en cualquier tama\u00f1o. Eleva el dise\u00f1o de tu sitio web con gr\u00e1ficos que escalan maravillosamente.","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Dominando SVG: C\u00f3mo Crear Y Usar Archivos SVG en Tu Sitio Web","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:45:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/"},"wordCount":2913,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","articleSection":["Dise\u00f1o Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/","name":"C\u00f3mo Crear y Usar Archivos SVG En Tu Sitio Web - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:45:40+00:00","description":"\u00bfQuieres gr\u00e1ficos n\u00edtidos y claros que hagan que tu sitio web luzca espl\u00e9ndido a cualquier escala? Aprende a crear, optimizar y usar archivos SVG con nuestra gu\u00eda.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","width":1460,"height":1095},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/crear-y-usar-archivos-svg-sitio-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Dominando SVG: C\u00f3mo Crear Y Usar Archivos SVG en Tu Sitio Web"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"es","translations":{"es":49610,"en":49598,"ru":52725,"de":55872,"pt":55918,"pl":55924,"uk":55935,"it":68620,"fr":70813,"nl":70839},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/49610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=49610"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/49610\/revisions"}],"predecessor-version":[{"id":76363,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/49610\/revisions\/76363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/49600"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=49610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=49610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=49610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}