{"id":9863,"date":"2020-03-11T10:50:40","date_gmt":"2020-03-11T09:50:40","guid":{"rendered":"https:\/\/blog.hostinger.io\/mx-tutoriales\/?p=9863"},"modified":"2026-03-10T16:28:34","modified_gmt":"2026-03-10T15:28:34","slug":"cargar-en-wordpress-svg","status":"publish","type":"post","link":"\/mx\/tutoriales\/cargar-en-wordpress-svg\/","title":{"rendered":"C\u00f3mo subir a WordPress archivos SVG: 2 m\u00e9todos seguros"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Los administradores y dise&ntilde;adores web est&aacute;n obligados a utilizar diferentes formatos de archivo multimedia en su trabajo. Hoy en d&iacute;a, uno de los formatos m&aacute;s populares es SVG, un formato vectorial basado en XML. Lastimosamente, no todos los navegadores y plataformas son compatibles con SVG y es necesario habilitarlo manualmente de antemano.<\/p><p class=\"wp-block-paragraph\">Este art&iacute;culo cubrir&aacute; los pasos para cargar archivos SVG en un sitio web de WordPress utilizando el plugin SVG Support. Tambi&eacute;n responderemos a algunas preguntas relacionadas con los problemas de seguridad que rodean a este formato de archivo multimedia en particular y por qu&eacute; vale la pena utilizar SVG.<\/p><p class=\"wp-block-paragraph\">Para empezar, vamos a familiarizarnos con SVG y su funcionamiento.<\/p><p>\n\n\n\n<\/p><p class=\"wp-block-paragraph\"><div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   <strong>&iquest;Qu&eacute; es SVG?<\/strong>\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Los gr&aacute;ficos vectoriales escalables (Scalable Vector Graphics o mejor conocidos como SVG) son un formato de imagen gr&aacute;fica vectorial basado en el texto XML. Mientras que los formatos de imagen habituales, como JPG y PNG, se componen de toneladas de peque&ntilde;os cuadrados llamados p&iacute;xeles, este formato se basa en el lenguaje de marcado XML para describir los atributos de la imagen.<\/p><\/div><\/p><p class=\"wp-block-paragraph\">En enero de 2023, <a href=\"https:\/\/w3techs.com\/technologies\/details\/im-svg\" target=\"_blank\" rel=\"noreferrer noopener\">el 54.1% de todos los sitios web del mundo<\/a> utilizan el formato SVG. Al igual que los formatos PNG y JPG, SVG es popular entre los sitios web de alto tr&aacute;fico como Google, Wikipedia y YouTube.<\/p><p class=\"wp-block-paragraph\">Otro aspecto positivo de SVG es que es ampliamente compatible con los principales navegadores. A continuaci&oacute;n se muestra una <a href=\"https:\/\/caniuse.com\/svg\" target=\"_blank\" rel=\"noreferrer noopener\">lista de navegadores<\/a> que admiten el formato de archivo SVG:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><strong>Navegador<\/strong><\/td><td><strong>Soporte parcial<\/strong><\/td><td><strong>Soporte total<\/strong><\/td><\/tr><tr><td>Edge<\/td><td>&ndash;<\/td><td>Versi&oacute;n 12-18, 79-96, 97<\/td><\/tr><tr><td>Firefox<\/td><td>Versi&oacute;n 2<\/td><td>Versi&oacute;n 3-94, 95, 96-97<\/td><\/tr><tr><td>Firefox para Android<\/td><td>&ndash;<\/td><td>Versi&oacute;n 95<\/td><\/tr><tr><td>Cromo<\/td><td>&ndash;<\/td><td>Versi&oacute;n 4-96, 97, 98-100<\/td><\/tr><tr><td>Chrome para Android<\/td><td>&ndash;<\/td><td>Versi&oacute;n 96<\/td><\/tr><tr><td>Safari<\/td><td>Versi&oacute;n 3.1<\/td><td>Versi&oacute;n 3.2-15.1, 15.2, TP<\/td><\/tr><tr><td>Opera<\/td><td>&ndash;<\/td><td>Versi&oacute;n 10-81, 82<\/td><\/tr><tr><td>Opera Mini<\/td><td>&ndash;<\/td><td>Todas las versiones<\/td><\/tr><tr><td>Opera Mobile<\/td><td>&ndash;<\/td><td>Versi&oacute;n 12-12.1, 64<\/td><\/tr><tr><td>Safari en iOS<\/td><td>&ndash;<\/td><td>Versi&oacute;n 3.2-15.1, 15.2<\/td><\/tr><tr><td>Navegador Android<\/td><td>Versi&oacute;n 3-4.3<\/td><td>Versi&oacute;n 4.4-4.4.4, 96<\/td><\/tr><tr><td>UC Browser para Android<\/td><td>&ndash;<\/td><td>Versi&oacute;n 12.12<\/td><\/tr><tr><td>Samsung Internet<\/td><td>&ndash;<\/td><td>Versi&oacute;n 4-14.0, 15.0<\/td><\/tr><tr><td>Navegador QQ<\/td><td>&ndash;<\/td><td>Versi&oacute;n 10.4<\/td><\/tr><tr><td>Navegador Baidu<\/td><td>&ndash;<\/td><td>Versi&oacute;n 7.12<\/td><\/tr><tr><td>Navegador KaiOS<\/td><td>&ndash;<\/td><td>Versi&oacute;n 2.5<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-funciona-svg\">&iquest;C&oacute;mo funciona SVG?<\/h2><p class=\"wp-block-paragraph\">Los gr&aacute;ficos vectoriales escalables utilizan XML para producir im&aacute;genes vectoriales bidimensionales. A diferencia de JPG y PNG, los gr&aacute;ficos vectoriales no se componen de p&iacute;xeles. En su lugar, su comportamiento se describe en archivos de texto XML.<\/p><p class=\"wp-block-paragraph\">Por lo anterior, los gr&aacute;ficos vectoriales escalables pueden buscarse, indexarse, programarse, editarse y comprimirse como el c&oacute;digo. Por ello, cualquiera puede crearlos con un editor de texto o un software de gr&aacute;ficos vectoriales.<\/p><h2 class=\"wp-block-heading\" id=\"h-es-compatible-wordpress-con-svg\">&iquest;Es compatible WordPress con SVG?<\/h2><p class=\"wp-block-paragraph\">No hay soporte para SVG en WordPress por defecto debido a los riesgos de seguridad que impone. M&aacute;s adelante cubriremos los problemas de seguridad que rodean a SVG en mayor profundidad.<\/p><p class=\"wp-block-paragraph\">El siguiente es un mensaje de error que aparece al subir un gr&aacute;fico SVG a un sitio web de WordPress:<\/p><figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"70\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-25.png\/w=1024,h=1024,fit=scale-down\" alt=\"Mensaje de error de WP al subir un SVG\" class=\"wp-image-23096\" style=\"width:undefinedpx;height:75px\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-25.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-25.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-25.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-25.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-25.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Se debate actualmente la posibilidad de que SVG forme parte de las funciones principales de WordPress. Hasta entonces, tenemos que ser creativos y utilizar otras soluciones para subir im&aacute;genes SVG a WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-utilizar-svg-en-wordpress\">&iquest;Por qu&eacute; utilizar SVG en WordPress?<\/h2><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"956\" height=\"335\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-28.png\/public\" alt=\"Diferencia entre SVG y SVG (compex)\" class=\"wp-image-41474\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-28.png\/w=956,fit=scale-down 956w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-28.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-28.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-28.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 956px) 100vw, 956px\" \/><\/figure><\/div><p class=\"wp-block-paragraph\">A pesar de sus problemas de seguridad, muchos usuarios siguen utilizando este formato de imagen ya que tiene varios beneficios. Estas son algunas de las ventajas de utilizar archivos SVG:<\/p><ul class=\"wp-block-list\">\n<li><strong>Escalabilidad<\/strong>: como el SVG es un formato de imagen vectorial, los archivos SVG conservan la misma calidad en todas las resoluciones de pantalla. Esta ventaja tambi&eacute;n est&aacute; presente despu&eacute;s de ampliarlos, por lo que mucha gente utiliza este formato de imagen escalable para iconos y logotipos.<\/li>\n\n\n\n<li><strong>Menor tama&ntilde;o de archivo<\/strong>: el uso de archivos SVG facilita la mejora del rendimiento del sitio web con im&aacute;genes a escala, ya que ocupan menos espacio de almacenamiento en la web y se cargan mucho m&aacute;s r&aacute;pido que las im&aacute;genes raster.<\/li>\n\n\n\n<li><strong>SEO-friendly<\/strong>:<strong> <\/strong>Google indexa los archivos SVG, permiti&eacute;ndoles aparecer en la B&uacute;squeda de Im&aacute;genes de Google y mejorando tus esfuerzos de SEO. Con las im&aacute;genes rasterizadas, te limitas a optimizar sus atributos alt.<\/li>\n\n\n\n<li><strong>Basados en el c&oacute;digo<\/strong>: los SVG son modificables mediante un editor de texto o un software de edici&oacute;n de gr&aacute;ficos vectoriales. Puedes optimizar los archivos de imagen SVG para sitios web o incluso a&ntilde;adir animaciones para que los gr&aacute;ficos sean interactivos.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-wordpress-svg-seguridad\">WordPress SVG: seguridad<\/h2><p class=\"wp-block-paragraph\">Dado que SVG es b&aacute;sicamente un archivo de texto XML, tiene vulnerabilidades explotables que no afectan a otros formatos de imagen. En consecuencia, la gente puede secuestrarlo f&aacute;cilmente con c&oacute;digo malicioso para lanzar ataques de secuencias de comandos entre sitios (XSS) y de entidades externas XML (XXE) en tu sistema.<\/p><p class=\"wp-block-paragraph\">Por esta raz&oacute;n, hay que tener cuidado al manejar archivos SVG y a&ntilde;adirlos a WordPress.<\/p><p class=\"wp-block-paragraph\">Para minimizar los riesgos de seguridad, aseg&uacute;rate de desinfectar los archivos SVG antes de subirlos a la biblioteca multimedia de WordPress. Este proceso elimina el c&oacute;digo sospechoso y los errores, haciendo que las im&aacute;genes sean seguras para tu sitio.<\/p><p class=\"wp-block-paragraph\">Puedes desinfectar las cargas de archivos SVG utilizando un plugin de SVG. Cubriremos los pasos para hacerlo m&aacute;s adelante. Sin embargo, recomendamos hacer una doble desinfecci&oacute;n con el <a href=\"https:\/\/svg.enshrined.co.uk\/\" target=\"_blank\" rel=\"noreferrer noopener\">SVG Sanitizer Test<\/a>, una herramienta online de Darryll Doyle, un desarrollador de WordPress.<\/p><p class=\"wp-block-paragraph\">Otra forma de <a href=\"\/mx\/tutoriales\/como-mejorar-la-seguridad-wordpress\/\">asegurar tu sitio web de WordPress<\/a> es limitando las cargas de SVG s&oacute;lo a los usuarios de confianza. Los usuarios seleccionados deben ser conscientes de los problemas de seguridad que rodean al formato SVG. Esto les har&aacute; pensar dos veces antes de obtener archivos SVG de fuentes dudosas.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/mx\/hosting-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-como-subir-archivos-svg-a-wordpress-utilizandos-2-metodos-seguros\">&iquest;C&oacute;mo subir archivos SVG a WordPress utilizandos 2 m&eacute;todos seguros?<\/h2><p class=\"wp-block-paragraph\">T&eacute;cnicamente, hay dos formas de a&ntilde;adir soporte para SVG a WordPress: utilizando un plugin o habilit&aacute;ndolo manualmente. Independientemente de tu elecci&oacute;n, te recomendamos encarecidamente que limites los privilegios de carga a los administradores y a los usuarios de confianza para minimizar las cargas maliciosas.<\/p><h3 class=\"wp-block-heading\" id=\"h-utilizar-un-plugin\">Utilizar un plugin<\/h3><p class=\"wp-block-paragraph\">En este tutorial, vamos a utilizar el <a href=\"https:\/\/es.wordpress.org\/plugins\/svg-support\/\" target=\"_blank\" rel=\"noreferrer noopener\">soporte SVG<\/a>. Este plugin utiliza una biblioteca de desinfecci&oacute;n de SVG que se activar&aacute; autom&aacute;ticamente al subir archivos SVG a la biblioteca de medios. Tambi&eacute;n es f&aacute;cil de configurar y de uso gratuito.<\/p><p class=\"wp-block-paragraph\">Estos son los pasos para configurar el soporte SVG:<\/p><ol class=\"wp-block-list\">\n<li><a href=\"\/mx\/tutoriales\/plugins-en-wordpress-gratis\/\">Instala el plugin<\/a> y act&iacute;valo.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"534\" height=\"325\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-29.png\/public\" alt=\"Plugin SVG Support en WP\" class=\"wp-image-41475\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-29.png\/w=534,fit=scale-down 534w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-29.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-29.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 534px) 100vw, 534px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Ve a <strong>Ajustes <\/strong>&rarr; <strong>SVG Support <\/strong>desde tu panel de control de WordPress.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"367\" height=\"381\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-26.png\/public\" alt=\"Ubicaci&oacute;n del plugin SVG Support en ajustes de WP\" class=\"wp-image-23097\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-26.png\/w=367,fit=scale-down 367w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-26.png\/w=289,fit=scale-down 289w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/09\/image-26.png\/w=144,fit=scale-down 144w\" sizes=\"(max-width: 367px) 100vw, 367px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Marca la casilla junto a la opci&oacute;n <strong>Restrict to Administrator <\/strong>para limitar los privilegios de carga. Haz lo mismo con la opci&oacute;n <strong>Enable Advanced Mode <\/strong>si deseas acceder a funciones avanzadas, como la representaci&oacute;n de SVG en l&iacute;nea y el estilo CSS.&nbsp;<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1315\" height=\"594\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-30.png\/public\" alt=\"Configuraci&oacute;n del plugin SVG Support\" class=\"wp-image-41477\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-30.png\/w=1315,fit=scale-down 1315w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-30.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-30.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-30.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2024\/08\/image-30.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1315px) 100vw, 1315px\" \/><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Despu&eacute;s de guardar los cambios, puedes empezar a subir los archivos SVG de forma segura a la biblioteca multimedia.&nbsp;<\/li>\n<\/ol><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    &lt;strong&gt;Consejo profesional&lt;\/strong&gt;                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> La opci&oacute;n de renderizar las im&aacute;genes destacadas en l&iacute;nea aparecer&aacute; en las entradas de WordPress que utilicen archivos SVG como im&aacute;genes destacadas si activas el modo avanzado. <\/p>\n                    <\/div>\n        <\/p><h3 class=\"wp-block-heading\" id=\"h-anadir-manualmente-la-compatibilidad-svg-de-wordpress\">A&ntilde;adir manualmente la compatibilidad SVG de WordPress<\/h3><p class=\"wp-block-paragraph\">Este m&eacute;todo implica editar el archivo <strong>functions.php <\/strong>de tu sitio web de WordPress. Por lo tanto, te recomendamos que sigas estos pasos cuidadosamente si est&aacute;s familiarizado con PHP y entiendes perfectamente el tema de la seguridad de los SVG.<\/p><p class=\"wp-block-paragraph\"><div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>&iexcl;Importante!<\/strong> Aseg&uacute;rate<strong> <\/strong>de hacer una <a href=\"\/mx\/tutoriales\/una-copia-seguridad-sitio-wordpress\/\">copia de seguridad<\/a> de tu sitio web de WordPress antes de realizar cualquier cambio para evitar cualquier p&eacute;rdida de datos en caso de una mala configuraci&oacute;n.\n            <\/p><\/div><\/p><p class=\"wp-block-paragraph\">Los siguientes pasos explicar&aacute;n c&oacute;mo habilitar SVG en WordPress manualmente a trav&eacute;s del Administrador de Archivos de Hostinger. Dicho esto, tambi&eacute;n puedes utilizar un cliente FTP como <a href=\"\/mx\/tutoriales\/configurar-filezilla\/\">FileZilla<\/a> en su lugar.<\/p><ol class=\"wp-block-list\">\n<li>Accede a hPanel y ve a <strong>Archivos <\/strong>&rarr; <strong>Administrador de Archivos<\/strong>.<\/li>\n\n\n\n<li>Dir&iacute;gete a <strong>public_html <\/strong>&rarr; <strong>wp-includes<\/strong>. Despl&aacute;zate hacia abajo hasta que encuentres <strong>functions.php<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"338\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2020\/03\/filemanager-wpincludes-functions-es.png\/w=1024,h=1024,fit=scale-down\" alt=\"El archivo functions.php en el gestor de archivos Hostinger\" class=\"wp-image-32515\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2020\/03\/filemanager-wpincludes-functions-es.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2020\/03\/filemanager-wpincludes-functions-es.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2020\/03\/filemanager-wpincludes-functions-es.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2020\/03\/filemanager-wpincludes-functions-es.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol start=\"3\" class=\"wp-block-list\">\n<li>Haz doble clic en el archivo para abrirlo y pega el siguiente fragmento de c&oacute;digo:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function add_file_types_to_uploads($file_types){\n$new_filetypes = array();\n$new_filetypes['svg'] = 'image\/svg+xml';\n$file_types = array_merge($file_types, $new_filetypes );\nreturn $file_types;\n}\nadd_filter('upload_mimes', 'add_file_types_to_uploads');<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Guarda los cambios e intenta subir un archivo de tipo SVG. Si el proceso es exitoso, tu biblioteca de medios deber&iacute;a aceptar la carga del archivo.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p class=\"wp-block-paragraph\">Las numerosas ventajas de los archivos SVG contribuyen a la creciente popularidad de este tipo de archivos. Por desgracia, los archivos de texto XML son propensos a la inyecci&oacute;n de c&oacute;digo, que es la principal raz&oacute;n por la que WordPress no incluye soporte para SVG por defecto, suponiendo un problema para la seguridad de la web.<\/p><p class=\"wp-block-paragraph\">Dicho esto, hay dos maneras de hacer que tu sitio de WordPress acepte archivos SVG: utilizando un plugin de WordPress o modificando el archivo <strong>functions.php <\/strong>del sitio. Junto con la limitaci&oacute;n de los privilegios de carga, conseguir&aacute;s subir de forma segura los archivos SVG a la biblioteca multimedia del sitio.<\/p><p class=\"wp-block-paragraph\">Esperamos que este art&iacute;culo te haya dado una idea de las ventajas y los riesgos de subir archivos SVG a un sitio web de WordPress. &iexcl;Buena suerte!<\/p><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Aprende m&aacute;s sobre WordPress                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/mx\/tutoriales\/aprender-wordpress\/\">20 recursos para aprender WordPress nivel principiantes<\/a><br><a href=\"\/mx\/tutoriales\/precios-wordpress\/\">Precios de WordPress en 2025: &iquest;Cu&aacute;nto cuesta un sitio web WordPress?<\/a><br><a href=\"\/mx\/tutoriales\/elegir-hosting-para-wordpress\/\">Comparaci&oacute;n de tipos de alojamiento para WordPress<\/a><\/p>\n                    <\/div>\n        <\/p><h2 class=\"wp-block-heading\" id=\"h-subir-svg-a-wordpress-preguntas-frecuentes\">Subir SVG a WordPress &ndash; Preguntas frecuentes<\/h2><p class=\"wp-block-paragraph\">A continuaci&oacute;n encontrar&aacute;s algunas respuestas sobre el uso de SVG en WordPress.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69447359804cd\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Es mejor SVG que PNG para un sitio web?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Los SVG son mejores para im&aacute;genes escalables, tama&ntilde;os de archivo m&aacute;s peque&ntilde;os y gr&aacute;ficos animados, mientras que los PNG son mejores para im&aacute;genes con muchos detalles y transparencia. La elecci&oacute;n depende de tus necesidades espec&iacute;ficas.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69447359804d0\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Deber&iacute;a utilizar un logotipo SVG en mi sitio web de WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>S&iacute;, utilizar un logotipo SVG en tu sitio web de WordPress puede mejorar la escalabilidad, reducir el tama&ntilde;o del archivo, permitir la personalizaci&oacute;n y garantizar la compatibilidad con todos los dispositivos y navegadores modernos.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69447359804d1\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Por qu&eacute; no puedo subir mis archivos SVG a WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Es posible que WordPress no permita subir archivos SVG por motivos de seguridad. Los archivos SVG pueden contener c&oacute;digo malicioso que podr&iacute;a da&ntilde;ar tu sitio web. Para solucionarlo, puedes utilizar un plugin o convertir el SVG a un PNG o JPG antes de subirlo a WordPress.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Los administradores y dise&ntilde;adores web est&aacute;n obligados a utilizar diferentes formatos de archivo multimedia en su trabajo. Hoy en d&iacute;a, uno de los formatos m&aacute;s populares es SVG, un formato vectorial basado en XML. Lastimosamente, no todos los navegadores y plataformas son compatibles con SVG y es necesario habilitarlo manualmente de antemano. Este art&iacute;culo cubrir&aacute; [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/mx\/tutoriales\/cargar-en-wordpress-svg\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":138,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"\u00bfC\u00f3mo cargar en WordPress Archivos SVG? 2 m\u00e9todos seguros","rank_math_description":"Cargar en WordPress archivos SVG puede ser peligroso. Descubre c\u00f3mo puedes cargar SVG a WordPress de forma segura leyendo este art\u00edculo.","rank_math_focus_keyword":"wordpress svg","footnotes":""},"categories":[4747],"tags":[12224],"class_list":["post-9863","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-wordpress-svg"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/upload-svg-to-wordpress\/","default":1},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/televerser-fichier-svg-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/cargar-en-wordpress-svg\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-upload-svg-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/cargar-en-wordpress-svg\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/cargar-en-wordpress-svg\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/cargar-en-wordpress-svg\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/9863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/comments?post=9863"}],"version-history":[{"count":17,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/9863\/revisions"}],"predecessor-version":[{"id":46830,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/9863\/revisions\/46830"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/media?parent=9863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/categories?post=9863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/tags?post=9863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}