{"id":26511,"date":"2021-04-25T13:23:00","date_gmt":"2021-04-25T10:23:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26511"},"modified":"2021-10-17T18:02:25","modified_gmt":"2021-10-17T15:02:25","slug":"como-permitir-la-compatibilidad-con-svg-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-permitir-la-compatibilidad-con-svg-en-wordpress\/","title":{"rendered":"C\u00f3mo permitir la compatibilidad con SVG en WordPress"},"content":{"rendered":"<p>\u00bfEst\u00e1 buscando subir im\u00e1genes SVG a su sitio web de WordPress? WordPress de forma predeterminada no permite cargar archivos SVG a trav\u00e9s del cargador de medios. En este art\u00edculo, mostramos c\u00f3mo permitir que la imagen SVG se cargue en WordPress.<\/p>\n<p>SVG (Scalable Vector Graphics) define gr\u00e1ficos basados \u200b\u200ben vectores en formato XML. En otras palabras, SVG define gr\u00e1ficos en formato XML. Los gr\u00e1ficos de los archivos SVG NO pierden calidad si se ampl\u00edan o cambian de tama\u00f1o. Adem\u00e1s, el tama\u00f1o del archivo SVG es peque\u00f1o y, por lo tanto, son populares hoy en d\u00eda.<\/p>\n<p>Cuando se trata de WordPress, si intenta cargar una imagen SVG desde el cargador de medios, obtendr\u00e1 un error como &#8216;Lo sentimos, este tipo de archivo no est\u00e1 permitido por razones de seguridad&#8217;.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20930-60823e0b0f7f2.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20930-60823e0b0f7f2.png\" alt=\"C\u00f3mo permitir la compatibilidad con SVG en WordPress\" ><\/a><\/p>\n<p>Esto se debe a que el tipo SVG MIME no se agrega en los tipos MIME predeterminados que se pueden cargar en WordPress. Para obtener la lista de todos los tipos MIME predeterminados, se puede usar el m\u00e9todo <code>get_allowed_mime_types()<\/code>. Esta funci\u00f3n devuelve la matriz de tipos MIME.<\/p>\n<p>Dicho esto, veamos c\u00f3mo agregar soporte de WordPress para archivos SVG.<\/p>\n<h3>Permitir que se cargue el archivo SVG<\/h3>\n<p>Para agregar soporte para la imagen SVG, usamos el filtro <code>upload_mimes<\/code>que permite modificar la lista de extensiones de archivo aceptables de WordPress. La extensi\u00f3n de los archivos SVG es &#8216;image \/ svg + xml&#8217;. Por lo tanto, debe colocar el siguiente c\u00f3digo en su archivo functions.php.<\/p>\n<pre><code>function add_svg_mime_types($mimes) {\n\u00a0\u00a0\u00a0\u00a0$mimes['svg'] = 'image\/svg+xml';\n\u00a0\u00a0\u00a0\u00a0return $mimes;\n}\nadd_filter('upload_mimes', 'add_svg_mime_types');<\/code><\/pre>\n<p>Al usar el <code>upload_mimes<\/code>filtro, tambi\u00e9n podemos restringir el formato de archivo espec\u00edfico para cargar en WordPress. Digamos que no queremos permitir archivos mp4. En ese caso, deber\u00edamos agregar el siguiente c\u00f3digo en el archivo functions.php.<\/p>\n<pre><code>function remove_mime_types($mimes) {\n\u00a0\u00a0\u00a0\u00a0unset($mimes['video\/mp4']);\n}\nadd_filter('upload_mimes', 'remove_mime_types');<\/code><\/pre>\n<p>Entonces, al agregar el peque\u00f1o fragmento de c\u00f3digo anterior, permitir\u00e1 cargar im\u00e1genes SVG en una biblioteca de medios. Sin embargo, despu\u00e9s de cargar SVG, si va a la p\u00e1gina de la lista, no ver\u00e1 la impresi\u00f3n en miniatura de su archivo SVG.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20930-60823e0b73689.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20930-60823e0b73689.png\" alt=\"C\u00f3mo permitir la compatibilidad con SVG en WordPress\" ><\/a><\/p>\n<p>Para mostrar la miniatura de SVG en la p\u00e1gina de la lista, necesitamos agregar una regla CSS que se pueda conectar al panel de WordPress.<\/p>\n<pre><code>function admin_custom_css() {\n\u00a0\u00a0\u00a0\u00a0echo \"&lt;style&gt;table.media .column-title .media-icon img[src='.svg']{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: auto;\n\u00a0\u00a0\u00a0\u00a0}&lt;\/style&gt;\";\n}\n\u00a0\nadd_action( 'admin_head', 'admin_custom_css' );<\/code><\/pre>\n<p>Despu\u00e9s de agregar el c\u00f3digo anterior en su archivo functions.php, ver\u00e1 la miniatura SVG.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20930-60823e0bd2280.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20930-60823e0bd2280.png\" alt=\"C\u00f3mo permitir la compatibilidad con SVG en WordPress\" ><\/a><\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/cargar-archivos-mediante-programacion-en-wordpress\/\" title=\"Cargar archivos mediante programaci\u00f3n en WordPress\" >Cargar archivos mediante programaci\u00f3n en WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/cargar-imagen-usando-la-biblioteca-bulletproof-en-php\/\" title=\"Cargar imagen usando la biblioteca a prueba de balas en PHP\" >Cargar imagen usando la biblioteca a prueba de balas en PHP<\/a><\/li>\n<li><a href=\"https:\/\/artisansweb.net\/how-to-change-wordpress-logo-on-login-page\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">C\u00f3mo cambiar el logotipo de WordPress en la p\u00e1gina de inicio de sesi\u00f3n<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los archivos SVG son el formato popular. En este tutorial, le mostramos c\u00f3mo permitir la compatibilidad con SVG en WordPress. Por defecto, WordPress no permite cargar SVG<\/p>\n","protected":false},"author":1,"featured_media":21676,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[271,606],"tags":[849],"class_list":["post-26511","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-2","category-uncategorized-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/26511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=26511"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/26511\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/21676"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=26511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=26511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=26511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}