{"id":131248,"date":"2022-08-25T10:41:40","date_gmt":"2022-08-25T05:11:40","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=131248"},"modified":"2022-08-25T10:41:41","modified_gmt":"2022-08-25T05:11:41","slug":"svg-icon","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/svg-icon\/","title":{"rendered":"Icono SVG"},"content":{"rendered":"

WordPress permite a los usuarios subir bastantes tipos de archivos de imagen, como PNG y JPG. La visualizaci\u00f3n de otros tipos de archivos, como gr\u00e1ficos vectoriales, puede resultar m\u00e1s problem\u00e1tica.<\/p>\n\n\n\n

Afortunadamente, existen algunas formas de incorporar archivos SVG a su sitio web. Con un poco de reconfiguraci\u00f3n, podr\u00e1s optimizar algunos de tus logotipos y otros gr\u00e1ficos utilizando este tipo de archivo. <\/p>\n\n\n\n

Aproveche este art\u00edculo para saber m\u00e1s sobre los archivos SVG y por qu\u00e9 le conviene utilizarlos. Adem\u00e1s, repasaremos dos formas de habilitar su uso en su sitio web. Tambi\u00e9n vamos a cubrir algunas precauciones de seguridad importantes que es posible que desee tomar. <\/p>\n\n\n\n

\u00bfQu\u00e9 es un SVG?<\/h3>\n\n\n\n

Un archivo SVG es un tipo de imagen vectorial que se compone de forma diferente a los tipos de archivo de imagen m\u00e1s comunes. Por ejemplo, un JPG se compone de miles de p\u00edxeles. Mientras que las im\u00e1genes vectoriales se parecen m\u00e1s a un conjunto de instrucciones escritas. No contienen p\u00edxeles que formen una imagen m\u00e1s grande. En su lugar, incluyen un conjunto de datos similar a un esquema que crea una imagen bidimensional. <\/p>\n\n\n\n

\u00bfPor qu\u00e9 utilizar SVG?<\/h3>\n\n\n\n

Los archivos SVG son mucho m\u00e1s peque\u00f1os que otros tipos de im\u00e1genes. Esto significa que su sitio no se ver\u00e1 atascado por los gr\u00e1ficos. Google indexa los archivos SVG. Esto puede ser de gran ayuda para la optimizaci\u00f3n de su sitio en los motores de b\u00fasqueda (SEO).<\/p>\n\n\n\n

C\u00f3mo subir un SVG a WordPress<\/h3>\n\n\n\n

Dado que WordPress no incluye soporte para SVGs, tendr\u00e1s que esforzarte un poco m\u00e1s para incluirlos en tu sitio web. Revisa las siguientes secciones de este art\u00edculo para obtener m\u00e1s informaci\u00f3n sobre c\u00f3mo a\u00f1adir archivos SVG a tu sitio web mediante un plugin y a trav\u00e9s de un proceso manual.<\/p>\n\n\n\n

M\u00e9todo 1: Utilizar un plugin<\/h4>\n\n\n\n

En primer lugar, tendr\u00e1s que descargar e instalar un Compatibilidad con SVG<\/a> Plugin. <\/p>\n\n\n\n

Una vez que haya instalado y activado el plugin, tendr\u00e1 una nueva opci\u00f3n de men\u00fa en su panel de WordPress bajo\u00a0Configuraci\u00f3n > Compatibilidad con SVG<\/em>. All\u00ed recibir\u00e1 instrucciones sobre c\u00f3mo dar estilo a los archivos SVG para su sitio web. <\/p>\n\n\n\n

Adem\u00e1s, podr\u00e1 configurar algunos par\u00e1metros administrativos importantes. Esto incluye restringir los privilegios de carga de SVG s\u00f3lo a los administradores. A continuaci\u00f3n, podr\u00e1 cargar archivos SVG directamente en su biblioteca multimedia. <\/p>\n\n\n\n

M\u00e9todo 2: Activar manualmente la carga de archivos SVG<\/h4>\n\n\n\n

Para empezar, tendr\u00e1s que editar el archivo functions.php de tu sitio web. Para ello, ve a Apariencia > Editar temas en el panel de control y selecciona el archivo functions.php. Tambi\u00e9n puedes acceder a los archivos de tu sitio mediante una aplicaci\u00f3n de protocolo de transferencia de archivos (FTP) como FileZilla.<\/p>\n\n\n\n

En cualquier caso, es mejor crear un tema hijo o cambiar a un entorno de desarrollo antes de realizar cualquier trabajo importante en tu sitio web. Esto mantendr\u00e1 tu sitio activo a salvo de cualquier da\u00f1o mientras realizas los cambios.<\/p>\n\n\n\n

A continuaci\u00f3n, tendr\u00e1 que a\u00f1adir el siguiente fragmento de c\u00f3digo a su archivo functions.php.<\/p>\n\n\n\n

\/\/ Allow SVG\r\nadd_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {\r\n\r\n  global $wp_version;\r\n  if ( $wp_version !== '4.7.1' ) {\r\n     return $data;\r\n  }\r\n\r\n  $filetype = wp_check_filetype( $filename, $mimes );\r\n\r\n  return [\r\n      'ext'             => $filetype['ext'],\r\n      'type'            => $filetype['type'],\r\n      'proper_filename' => $data['proper_filename']\r\n  ];\r\n\r\n}, 10, 4 );\r\n\r\nfunction cc_mime_types( $mimes ){\r\n  $mimes['svg'] = 'image\/svg+xml';\r\n  return $mimes;\r\n}\r\nadd_filter( 'upload_mimes', 'cc_mime_types' );\r\n\r\nfunction fix_svg() {\r\n  echo '<style type=\"text\/css\">\r\n        .attachment-266x266, .thumbnail img {\r\n             width: 100% !important;\r\n             height: auto !important;\r\n        }\r\n        <\/style>';\r\n}\r\nadd_action( 'admin_head', 'fix_svg' );<\/code><\/pre>\n\n\n\n
A continuaci\u00f3n, podr\u00e1 cargar im\u00e1genes SVG en su biblioteca multimedia. All\u00ed podr\u00e1s verlas e interactuar con ellas igual que con otros tipos de archivos de imagen.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>","protected":false},"excerpt":{"rendered":"
WordPress permite a los usuarios subir bastantes tipos de archivos de imagen, como PNG y JPG. Mostrar otros tipos de archivos, como gr\u00e1ficos vectoriales, puede ser m\u00e1s problem\u00e1tico. Afortunadamente, existen algunas formas de incorporar archivos SVG a su sitio web. Con un poco de reconfiguraci\u00f3n, podr\u00e1 optimizar algunos de sus [...]<\/p>","protected":false},"author":89,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[1598],"docs_tag":[],"class_list":{"0":"post-131248","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-troubleshooting"},"spectra_custom_meta":{"wp_last_modified_info":["August 25, 2022 @ 10:41 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_edit_lock":["1661409399:89"],"_wplmi_last_modified":["2022-08-25 10:41:41"],"rank_math_seo_score":["14"],"rank_math_internal_links_processed":["1"],"_edit_last":["89"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"rank_math_primary_docs_category":["1598"],"views":["7413"],"pfd_related_docs":[""],"rank_math_analytic_object_id":["1898"],"helpful":["8"],"unhelpful":["18"],"redirects":["4"],"_trp_automatically_translated_slug_es_ES":["icono-svg"],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:5:{i:0;s:14:\"core\/paragraph\";i:1;s:12:\"core\/heading\";i:2;s:9:\"core\/code\";i:3;s:14:\"uagb\/container\";i:4;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776536151\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"mounikak","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/mounikak\/"},"uagb_comment_info":0,"uagb_excerpt":"WordPress enables users to upload quite a few different kinds of image files such as PNG and JPG. Displaying other file types, such as vector graphics, can be more problematic. Fortunately, there are a few ways to incorporate SVG files into your website. With a little reconfiguring, you\u2019ll be able to optimize some of your…","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/131248"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=131248"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/131248\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=131248"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=131248"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=131248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}