{"id":7951,"date":"2024-05-10T09:15:28","date_gmt":"2024-05-10T08:15:28","guid":{"rendered":"https:\/\/www.lucushost.com\/blog\/?p=7951"},"modified":"2026-02-02T08:09:03","modified_gmt":"2026-02-02T07:09:03","slug":"subir-svg-wordpress","status":"publish","type":"post","link":"https:\/\/www.lucushost.com\/blog\/subir-svg-wordpress\/","title":{"rendered":"C\u00f3mo subir im\u00e1genes SVG en WordPress"},"content":{"rendered":"<p>Cuando <strong><a href=\"https:\/\/www.lucushost.com\/blog\/como-crear-una-web-en-wordpress-guia-completa\/\">creas una p\u00e1gina web<\/a>,<\/strong> uno de los factores imprescindibles para captar la atenci\u00f3n de los usuarios y transmitir mensajes de manera efectiva es la calidad visual. Por tanto, es necesario utilizar archivos SVG.<\/p>\n<p>Los archivos SVG se han convertido en una herramienta infalible de dise\u00f1adores y desarrolladores para crear una web totalmente profesional.<\/p>\n<p><!--more--><\/p>\n<p>Pero, \u00bfsabes qu\u00e9 son las <strong><a href=\"https:\/\/www.lucushost.com\/blog\/plugin-para-editar-imagenes-wordpress\/\">im\u00e1genes<\/a> <\/strong>SVG y para qu\u00e9 sirven? \u00bfQuieres a\u00f1adir gr\u00e1ficos vectoriales a tu web de WordPress?<\/p>\n<p>Si es as\u00ed, has llegado al sitio adecuado, porque en este post te explicar\u00e9 qu\u00e9 es SVG, sus diferentes funciones y las razones por las que debes usarlo, e incluso dos formas de subir las im\u00e1genes SVG en WordPress.<\/p>\n<p>\u00a1As\u00ed que vamos a ello! \ud83d\ude42<\/p>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Tabla de contenidos:<\/p><ul class=\"toc_list\"><li><a href=\"#Que_es_SVG\">\u00bfQu\u00e9 es SVG?<\/a><\/li><li><a href=\"#Para_que_sirve_el_formato_SVG\">\u00bfPara qu\u00e9 sirve el formato SVG?<\/a><\/li><li><a href=\"#Por_que_usar_SVG_en_WordPress\">\u00bfPor qu\u00e9 usar SVG en WordPress?<\/a><\/li><li><a href=\"#Como_subir_SVG_a_WordPress_con_plugins\">\u00bfC\u00f3mo subir SVG a WordPress con plugins?<\/a><\/li><li><a href=\"#Como_subir_SVG_a_WordPress_sin_plugins\">\u00bfC\u00f3mo subir SVG a WordPress sin plugins?<\/a><\/li><li><a href=\"#Y_tu_usas_archivos_SVG_en_tu_web\">Y t\u00fa, \u00bfusas archivos SVG en tu web?<\/a><\/li><\/ul><\/div>\n\n<h2><span id=\"Que_es_SVG\">\u00bfQu\u00e9 es SVG?<\/span><\/h2>\n<p>SVG, tambi\u00e9n conocido como <i>Scalable Vector Graphics<\/i> en ingl\u00e9s, es un formato de archivo basado en XML que se utiliza para representar gr\u00e1ficos vectoriales bidimensionales de forma independiente de la resoluci\u00f3n de la pantalla en la que se visualizan.<\/p>\n<p>\u00bfQu\u00e9 significa esto? B\u00e1sicamente que los archivos SVG son perfectos para crear gr\u00e1ficos que pueden escalar a cualquier tama\u00f1o sin perder calidad.<\/p>\n<p>Los SVG son formatos de imagen rasterizados que se basan en p\u00edxeles, pero usan ecuaciones matem\u00e1ticas para describir formas y trazados, lo que los hace m\u00e1s f\u00e1ciles de usar y mantener la calidad del archivo.<\/p>\n<p>Por esta raz\u00f3n, son ideales para una infinidad de usos en el dise\u00f1o web, desde logotipos e iconos hasta gr\u00e1ficos complejos y animaciones.<\/p>\n<h2><span id=\"Para_que_sirve_el_formato_SVG\">\u00bfPara qu\u00e9 sirve el formato SVG?<\/span><\/h2>\n<p>El formato SVG cuenta con una gran variedad de usos en el dise\u00f1o web. Sus funciones m\u00e1s habituales son:<\/p>\n<ul>\n<li><strong>Iconos y logotipos: <\/strong>Son perfectos para crear iconos y logotipos n\u00edtidos y escalables que se ven bien en cualquier tama\u00f1o y resoluci\u00f3n.<\/li>\n<li><strong>Gr\u00e1ficos y visualizaciones:<\/strong> Son ideales para representar informaci\u00f3n de manera clara y efectiva, desde simples gr\u00e1ficos hasta visualizaciones de datos complejos.<\/li>\n<li><strong>Animaciones y efectos:<\/strong> Se pueden animar para crear efectos interactivos y din\u00e1micos en las p\u00e1ginas web, gracias a <a href=\"https:\/\/www.lucushost.com\/blog\/css\/\">CSS<\/a> y JavaScript.<\/li>\n<li><strong>Botones y elementos de interfaz:<\/strong> Se pueden utilizar para generar botones y otros elementos de interfaz personalizados que se adaptan a cualquier tama\u00f1o de pantalla.<\/li>\n<li><strong>Impresi\u00f3n:<\/strong> Los gr\u00e1ficos SVG pueden ser escalados a cualquier tama\u00f1o sin p\u00e9rdida de calidad, lo que los hace ideales para impresi\u00f3n de alta calidad en distintos materiales y tama\u00f1os.<\/li>\n<\/ul>\n<p>En resumen, el formato SVG es muy vers\u00e1til y tiene un sinf\u00edn de aplicaciones en dise\u00f1o web, dise\u00f1o gr\u00e1fico, visualizaci\u00f3n de datos e impresi\u00f3n.<\/p>\n<h2><span id=\"Por_que_usar_SVG_en_WordPress\">\u00bfPor qu\u00e9 usar SVG en WordPress?<\/span><\/h2>\n<p>Ahora que sabes qu\u00e9 es SVG y para qu\u00e9 sirve, veamos las diferentes razones por las que deber\u00edas usarlo.<\/p>\n<ul>\n<li><strong>Escalabilidad:<\/strong> Se pueden redimensionar sin p\u00e9rdida de calidad, lo que garantiza que tus gr\u00e1ficos se vean n\u00edtidos en cualquier dispositivo.<\/li>\n<li><strong>Optimizaci\u00f3n del rendimiento:<\/strong> Son ligeros en t\u00e9rminos de tama\u00f1o de archivo, lo que ayuda a mejorar el rendimiento de tu sitio web al reducir los tiempos de carga.<\/li>\n<li><strong>Flexibilidad de estilo:<\/strong> Se pueden manipular y estilizar f\u00e1cilmente con CSS, lo que te permite personalizar el aspecto y la apariencia de tus gr\u00e1ficos sin esfuerzo.<\/li>\n<li><strong>Compatibilidad:<\/strong> Son compatibles con la mayor\u00eda de los navegadores, lo que garantiza una buena <strong><a href=\"https:\/\/www.lucushost.com\/blog\/5-tips-para-mejorar-la-experiencia-de-usuario-de-tu-web\/\">experiencia de usuario<\/a>,<\/strong> independientemente del dispositivo o navegador que utilicen.<\/li>\n<li><strong>Animaciones y efectos:<\/strong> Los archivos SVG pueden contener animaciones y efectos que se pueden crear utilizando CSS o JavaScript. Esto permite a\u00f1adir interactividad y dinamismo a los gr\u00e1ficos en WordPress, lo que puede mejorar la experiencia del usuario y hacer que el contenido sea m\u00e1s atractivo.<\/li>\n<li><strong>Optimizaci\u00f3n de SEO:<\/strong> Debido a que los gr\u00e1ficos SVG son archivos de texto, su contenido es legible por los motores de b\u00fasqueda, es decir, que pueden <strong><a href=\"https:\/\/www.lucushost.com\/blog\/seo-checklist\/\">mejorar la optimizaci\u00f3n de motores de b\u00fasqueda<\/a><\/strong> (SEO) de tu sitio web al permitir que los motores de b\u00fasqueda indexen el contenido del gr\u00e1fico y lo utilicen para mejorar la clasificaci\u00f3n de tu sitio.<\/li>\n<li><strong>Personalizaci\u00f3n:<\/strong> Al utilizar SVG en WordPress, puedes personalizar f\u00e1cilmente los gr\u00e1ficos seg\u00fan tus necesidades, desde cambiar los colores, agregar efectos, hasta ajustar el dise\u00f1o directamente en el c\u00f3digo SVG o mediante CSS.<\/li>\n<\/ul>\n<p>Usar SVG en WordPress es una excelente opci\u00f3n para mejorar la apariencia, el rendimiento y la accesibilidad de tu p\u00e1gina web. Adem\u00e1s, facilita la personalizaci\u00f3n y optimizaci\u00f3n de tus elementos visuales.<\/p>\n<h2><span id=\"Como_subir_SVG_a_WordPress_con_plugins\">\u00bfC\u00f3mo subir SVG a WordPress con plugins?<\/span><\/h2>\n<p>Dado que WordPress es el <strong><a href=\"https:\/\/www.lucushost.com\/blog\/gestor-de-contenidos\/\">gestor de contenidos<\/a><\/strong> m\u00e1s utilizado por la mayor\u00eda de los desarrolladores, es importante destacar que cuenta con un amplio directorio de plugins. Entre ellos, se encuentra el plugin <strong><a href=\"https:\/\/es.wordpress.org\/plugins\/svg-support\/\" rel=\"nofollow noopener\" target=\"_blank\">SVG Support<\/a>,<\/strong> ideales para cargar archivos SVG en WordPress.<\/p>\n<p>A continuaci\u00f3n te explico c\u00f3mo hacerlo paso a paso:<\/p>\n<p><strong>1-Instala el plugin \u00abSVG Support\u00bb.<\/strong>Ve a tu panel de administraci\u00f3n de WordPress y selecciona en \u00abPlugins\u00bb &gt; \u00abA\u00f1adir nuevo\u00bb.<\/p>\n<p>En el buscador, escribe <strong>\u00abSVG Support\u00bb<\/strong> y, cuando lo encuentres, haz clic en \u00abInstalar ahora\u00bb. Una vez instalado, act\u00edvalo.<img loading=\"lazy\" decoding=\"async\" class=\" wp-image-7984 aligncenter\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/SVG-Support-plugin-300x150.png\" alt=\"SVG Support plugin\" width=\"384\" height=\"192\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/SVG-Support-plugin-300x150.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/SVG-Support-plugin.png 561w\" sizes=\"(max-width: 384px) 100vw, 384px\" \/><\/p>\n<p><strong>2-Ajusta la configuraci\u00f3n del plugin.<\/strong> Despu\u00e9s de activarlo, ve a \u00abAjustes\u00bb &gt; \u00abSVG Support\u00bb en el men\u00fa de WordPress. Desde all\u00ed, puedes configurarlo seg\u00fan tus necesidades.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-7990 aligncenter\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/Ajustes-SVG-Support-plugin1-300x243.png\" alt=\"Ajustes SVG Support plugin\" width=\"363\" height=\"294\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/Ajustes-SVG-Support-plugin1-300x243.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/Ajustes-SVG-Support-plugin1.png 323w\" sizes=\"(max-width: 363px) 100vw, 363px\" \/><\/p>\n<p>Generalmente, las opciones predeterminadas son adecuadas, pero es recomendable revisarlas.<\/p>\n<p><strong>3-Sube tu archivo SVG.<\/strong> Cuando vayas a subir un archivo en tu biblioteca multimedia de WordPress, podr\u00e1s seleccionar archivos SVG como lo har\u00edas con cualquier otro tipo de imagen.<\/p>\n<p>Simplemente, haz clic en \u00abA\u00f1adir nuevo\u00bb en \u00abMedios\u00bb &gt; \u00abA\u00f1adir\u00bb en tu panel de WordPress, selecciona el archivo SVG desde tu ordenador y s\u00fabelo.<\/p>\n<p><strong>4-Inserta el SVG en tus publicaciones o p\u00e1ginas.<\/strong> Una vez que hayas subido el archivo SVG, podr\u00e1s a\u00f1adirlo en tus publicaciones o p\u00e1ginas de la misma manera que lo har\u00edas con otras im\u00e1genes.<\/p>\n<p>Sencillamente, haz clic en \u00abA\u00f1adir medio\u00bb y selecciona tu archivo SVG desde la biblioteca multimedia e ins\u00e9rtalo en tu contenido.<\/p>\n<p>Es importante tener en cuenta que algunos temas y plugins pueden deshabilitar la capacidad de subir archivos SVG por razones de seguridad.<\/p>\n<p>Si encuentras alg\u00fan problema al intentar subir las im\u00e1genes SVG, es probable que necesites verificar la configuraci\u00f3n de tu tema o instalar un plugin de medios SVG m\u00e1s avanzado.<\/p>\n<p>Recuerda que al utilizar archivos SVG en tu sitio web, es fundamental comprobar que los archivos sean seguros y provengan de fuentes confiables para evitar posibles problemas de seguridad.<\/p>\n<p>Antes de hacer alg\u00fan cambio en tu web, aseg\u00farate de tener siempre una copia de seguridad actual de tu sitio. Si se trata de la primera vez que realizas un backup, tengo una gu\u00eda completa que te puede ayudar con ello: <strong><a href=\"https:\/\/www.lucushost.com\/blog\/que-es-un-backup-y-como-hacer-una-copia-de-seguridad-de-tu-web\/\">\u201cC\u00f3mo hacer un backup de mi web\u201d<\/a><\/strong>.<\/p>\n<p>Pero si, por el contrario, tu web est\u00e1 alojada en LucusHost, ya sabes que no tienes que preocuparte por nada \ud83e\udd17. Desde tu \u00e1rea de cliente, tienes a tu disposici\u00f3n la herramienta<strong><a href=\"https:\/\/www.lucushost.com\/ayuda\/premium-backup-gestionar-copias-de-seguridad\/\"> Premium Backup<\/a><\/strong>, donde cuentas con dos copias de seguridad al d\u00eda para que puedas restaurarlas en tan solo unos clics.<\/p>\n<h2><span id=\"Como_subir_SVG_a_WordPress_sin_plugins\">\u00bfC\u00f3mo subir SVG a WordPress sin plugins?<\/span><\/h2>\n<p>Si prefieres adentrarte en las entra\u00f1as de WordPress y permitir la subida de archivos SVG de manera manual, simplemente sigue estos pasos:<\/p>\n<p>1-Accede a tu <a href=\"https:\/\/www.lucushost.com\/blog\/como-entrar-al-cpanel-de-mi-dominio\/\">panel de control de cPanel<\/a> y dir\u00edgete a la secci\u00f3n de \u201cArchivos\u201d, haciendo clic en <strong>\u201cAdministrador de Archivos\u201d<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-7967 aligncenter\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/Como-subir-SVG-a-WordPress-sin-plugins-300x74.png\" alt=\"C\u00f3mo subir SVG a WordPress sin plugins\" width=\"767\" height=\"189\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/Como-subir-SVG-a-WordPress-sin-plugins-300x74.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/Como-subir-SVG-a-WordPress-sin-plugins-1024x253.png 1024w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/Como-subir-SVG-a-WordPress-sin-plugins-768x190.png 768w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/Como-subir-SVG-a-WordPress-sin-plugins-700x173.png 700w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/Como-subir-SVG-a-WordPress-sin-plugins.png 1294w\" sizes=\"(max-width: 767px) 100vw, 767px\" \/><\/p>\n<p>2- Ahora accede a la carpeta <em>public_html<\/em> y localiza el directorio en el que tienes instalado WordPress.<\/p>\n<p>A continuaci\u00f3n, entra en la carpeta <em>wp-content<\/em>, que contiene los temas y plugins de WordPress. Dentro de ella, abre la carpeta <em>themes<\/em> y selecciona tema que tienes activo. Ah\u00ed\u00a0encontrar\u00e1s el archivo functions.php, que es donde debes a\u00f1adir el c\u00f3digo para permitir la subida de archivos SVG.<\/p>\n<p>La ruta ser\u00eda:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">public_html\/wp-content\/themes\/tu-tema\/functions.php<\/pre>\n<p>NOTA: Si utilizas un tema hijo (child theme), aseg\u00farate de editar el archivo functions.php del tema hijo y no el del tema principal, para evitar perder los cambios al actualizar el tema.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13979\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/archivo-functions-php-wordpress.png\" alt=\"Archivo functions.php de WordPress \" width=\"1130\" height=\"557\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/archivo-functions-php-wordpress.png 1130w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/archivo-functions-php-wordpress-300x148.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/archivo-functions-php-wordpress-1024x505.png 1024w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/archivo-functions-php-wordpress-768x379.png 768w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/05\/archivo-functions-php-wordpress-700x345.png 700w\" sizes=\"(max-width: 1130px) 100vw, 1130px\" \/><\/p>\n<p>3- Para modificar el archivo functions.php, haz clic con el bot\u00f3n derecho y selecciona \u201cEdit\u201d. A continuaci\u00f3n, a\u00f1ade el siguiente fragmento de c\u00f3digo al final del archivo:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function add_file_types_to_uploads($file_types) {\r\n    $new_filetypes = array();\r\n    $new_filetypes['svg'] = 'image\/svg+xml';\r\n    $file_types = array_merge($file_types, $new_filetypes);\r\n    return $file_types;\r\n}\r\nadd_filter('upload_mimes', 'add_file_types_to_uploads');\r\n<\/pre>\n<p>4-Una vez hecho esto, haz clic en \u00abGuardar los cambios\u00bb y \u00a1listo! \ud83d\ude09<\/p>\n<p>Ahora podr\u00e1s subir tus archivos SVG a la biblioteca de medios de WordPress sin problemas.<\/p>\n<h2><span id=\"Y_tu_usas_archivos_SVG_en_tu_web\">Y t\u00fa, \u00bfusas archivos SVG en tu web?<\/span><\/h2>\n<p>Los archivos SVG son una excelente opci\u00f3n para mejorar la apariencia y el rendimiento de tu web en WordPress, adem\u00e1s de permitir a\u00f1adir elementos gr\u00e1ficos vectoriales escalables a tu p\u00e1gina web.<\/p>\n<p>Antes de subir tus <strong><a href=\"https:\/\/www.lucushost.com\/blog\/10-webs-para-descargar-imagenes-gratis\/\">im\u00e1genes<\/a><\/strong> SVG con plugins o sin ellos, es necesario que te asegures de seguir las <a href=\"https:\/\/www.lucushost.com\/blog\/12-formas-mejorar-la-seguridad-wordpress\/\"><strong>mejores pr\u00e1cticas de seguridad<\/strong><\/a> y optimizaci\u00f3n para garantizar una experiencia de usuario \u00f3ptima.<\/p>\n<p>Si despu\u00e9s de leer este art\u00edculo tienes alguna duda, puedes dejarla en los comentarios m\u00e1s abajo. Estar\u00e9 encantada de ayudarte \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando creas una p\u00e1gina web, uno de los factores imprescindibles para captar la atenci\u00f3n de los usuarios y transmitir mensajes de manera efectiva es la calidad visual. Por tanto, es necesario utilizar archivos SVG. Los archivos SVG se han convertido en una herramienta infalible de dise\u00f1adores y desarrolladores para crear una web totalmente profesional.<\/p>\n","protected":false},"author":4,"featured_media":7995,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/7951"}],"collection":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/comments?post=7951"}],"version-history":[{"count":61,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/7951\/revisions"}],"predecessor-version":[{"id":13981,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/7951\/revisions\/13981"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media\/7995"}],"wp:attachment":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media?parent=7951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/categories?post=7951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/tags?post=7951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}