programación

Consejos para SVG Web

Last Updated: 21/02/2024

Crear y exportar gráficos vectoriales escalables (SVG) para la web es una habilidad fundamental en el diseño y desarrollo web moderno. Los SVG son formatos de imagen basados en XML que ofrecen numerosas ventajas, como la escalabilidad sin pérdida de calidad y la capacidad de manipulación con CSS y JavaScript. Aquí te presento algunas recomendaciones para crear y exportar SVG para la web:

Publicaciones relacionadas

  1. Mantén la simplicidad: Los SVG funcionan mejor con formas simples y líneas limpias. Evita la complejidad excesiva y los detalles minuciosos que puedan aumentar innecesariamente el tamaño del archivo.

  2. Utiliza un software adecuado: Puedes crear gráficos SVG utilizando herramientas como Adobe Illustrator, Inkscape (software de código abierto) o incluso editores de texto simples. Asegúrate de utilizar una herramienta que te permita exportar el SVG de manera eficiente.

  3. Organiza tu documento: Si estás creando gráficos complejos, organiza tu documento SVG con etiquetas para agrupar elementos relacionados. Esto facilitará la manipulación y el mantenimiento del SVG en el futuro.

  4. Optimiza el código SVG: Después de crear el SVG, revisa el código para eliminar cualquier elemento o atributo redundante. Puedes utilizar herramientas en línea o complementos de software para optimizar automáticamente el código SVG y reducir el tamaño del archivo.

  5. Considera la accesibilidad: Asegúrate de que tu SVG sea accesible para todos los usuarios, incluidos aquellos con discapacidades visuales. Proporciona descripciones alternativas utilizando el atributo aria-label o aria-labelledby para elementos importantes dentro del SVG.

  6. Evita el uso de texto en trazos: Siempre que sea posible, utiliza texto real en lugar de convertir el texto en trazos dentro del SVG. Esto permitirá que el texto sea indexado por los motores de búsqueda y que sea accesible para lectores de pantalla.

  7. Selecciona el formato de exportación adecuado: Cuando exportes el SVG, elige el formato que mejor se adapte a tus necesidades. Si estás utilizando Illustrator, por ejemplo, puedes exportar el SVG con diferentes configuraciones de optimización según si se trata de un gráfico simple o complejo.

  8. Prueba en diferentes navegadores y dispositivos: Después de integrar el SVG en tu sitio web, asegúrate de probar su apariencia y funcionalidad en varios navegadores y dispositivos. Algunas características de SVG pueden comportarse de manera diferente según el navegador, por lo que es importante realizar pruebas exhaustivas.

  9. Aprende sobre animaciones SVG: Los SVG son excelentes para crear animaciones vectoriales escalables. Investiga sobre técnicas de animación SVG utilizando CSS o JavaScript para agregar interactividad y dinamismo a tus gráficos.

  10. Sigue aprendiendo y experimentando: El diseño y la optimización de SVG para la web es un campo en constante evolución. Mantente al día con las últimas técnicas y herramientas, y no temas experimentar con nuevas ideas para mejorar tus habilidades en la creación y exportación de SVG.

Más Informaciones

Por supuesto, aquí tienes más detalles sobre cómo crear y exportar gráficos vectoriales escalables (SVG) para la web:

  1. Mantén la simplicidad y la legibilidad del código: Al diseñar tus gráficos en un software de edición vectorial como Adobe Illustrator o Inkscape, es importante mantener la simplicidad en tus diseños. Los SVG funcionan mejor con formas simples y líneas limpias. Además, asegúrate de que el código SVG resultante sea legible y esté bien estructurado. Esto facilitará la edición manual del código en caso necesario y mejorará la eficiencia del renderizado en los navegadores.

  2. Utiliza atributos y elementos semánticos: Los SVG admiten una amplia gama de elementos y atributos que pueden mejorar la semántica y accesibilidad de tus gráficos. Por ejemplo, puedes utilizar </code> y <code><desc></code> para proporcionar descripciones textuales de tus gráficos, lo que es útil para usuarios con discapacidad visual y para mejorar el SEO. Del mismo modo, puedes utilizar atributos como <code>role</code> y <code>aria-*</code> para mejorar la accesibilidad de tus SVG.</p> </li> <li> <p><strong>Optimiza el rendimiento</strong>: La optimización del rendimiento es crucial al exportar SVG para la web. Esto incluye reducir el tamaño del archivo SVG tanto como sea posible sin comprometer la calidad visual. Puedes lograr esto eliminando elementos, combinando trazos y utilizando atributos de presentación de manera eficiente. También es importante considerar el uso de técnicas de carga diferida o lazy loading para mejorar los tiempos de carga de la página.</p> </li> <li> <p><strong>Cuida la compatibilidad con navegadores</strong>: Aunque los SVG son ampliamente compatibles con la mayoría de los navegadores modernos, es importante realizar pruebas exhaustivas en diferentes navegadores y versiones para garantizar una experiencia consistente para todos los usuarios. Algunas características avanzadas de SVG pueden no ser compatibles con versiones más antiguas de ciertos navegadores, por lo que es importante tener esto en cuenta al diseñar y exportar tus gráficos.</p> </li> <li> <p><strong>Aprovecha las capacidades de animación y interactividad</strong>: Una de las ventajas clave de los SVG es su capacidad para admitir animaciones y efectos interactivos directamente en el código SVG utilizando CSS o JavaScript. Esto te permite crear gráficos dinámicos y atractivos sin necesidad de usar imágenes estáticas o tecnologías externas. Investiga sobre técnicas de animación SVG, como las transiciones CSS y las animaciones SMIL, para agregar interactividad a tus gráficos.</p> </li> <li> <p><strong>Explora el uso de filtros y efectos</strong>: Los SVG admiten una amplia variedad de filtros y efectos que pueden aplicarse a elementos gráficos para mejorar su apariencia visual. Estos incluyen desenfoques, sombras, saturación de color y muchos más. Experimenta con diferentes efectos para crear gráficos visualmente impactantes y atractivos.</p> </li> <li> <p><strong>Integra SVG en tu flujo de trabajo de desarrollo web</strong>: Para aprovechar al máximo los SVG en tu sitio web, es importante integrarlos de manera efectiva en tu flujo de trabajo de desarrollo web. Esto puede implicar el uso de sistemas de control de versiones para administrar tus archivos SVG, automatización de tareas para optimizar y procesar tus gráficos automáticamente, y la implementación de técnicas de carga y renderizado eficientes en tu sitio web.</p> </li> <li> <p><strong>Mantente actualizado con las mejores prácticas</strong>: El diseño y la optimización de SVG para la web es un campo en constante evolución, con nuevas técnicas y herramientas que surgen regularmente. Mantente al día con las últimas tendencias y mejores prácticas en el diseño web y SVG para garantizar que tus gráficos sean modernos, eficientes y compatibles con los estándares actuales de la web.</p> </li> </ol> </div> </div> </p> <div class="stream-item stream-item-below-post-content"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> </div><!-- .entry-content /--> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div class="single-post-meta post-meta clearfix"><span class="meta-item last-updated">Last Updated: 21/02/2024</span></div><!-- .post-meta --> <div id="share-buttons-top" class="share-buttons share-buttons-top"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Consejos%20para%20SVG%20Web&url=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://revistacompleta.com/consejos-para-svg-web/&title=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://revistacompleta.com/consejos-para-svg-web/&name=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://revistacompleta.com/consejos-para-svg-web/&description=Consejos%20para%20SVG%20Web&media=https://revistacompleta.com/wp-content/uploads/2023/12/revista-completa-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://revistacompleta.com/consejos-para-svg-web/&title=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://revistacompleta.com/consejos-para-svg-web/&redirect_uri=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://revistacompleta.com/consejos-para-svg-web/&redirect_uri=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Consejos%20para%20SVG%20Web%20https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://revistacompleta.com/consejos-para-svg-web/&text=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=Consejos%20para%20SVG%20Web%20https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Consejos%20para%20SVG%20Web%20https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> <a href="mailto:?subject=Consejos%20para%20SVG%20Web&body=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Compartir por correo electrónico" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Compartir por correo electrónico</span> </a> <a href="#" rel="external noopener nofollow" title="Imprimir" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Imprimir</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BlogPosting","dateCreated":"2024-02-21T10:41:35+03:00","datePublished":"2024-02-21T10:41:35+03:00","dateModified":"2024-02-21T10:41:35+03:00","headline":"Consejos para SVG Web","name":"Consejos para SVG Web","keywords":"Accesibilidad,Animaciones,Compatibilidad,desarrollo web,Dise\u00f1o Web,Gr\u00e1ficos vectoriales,Interactividad,optimizaci\u00f3n,Rendimiento,SVG","url":"https:\/\/revistacompleta.com\/consejos-para-svg-web\/","description":"Crear y exportar gr\u00e1ficos vectoriales escalables (SVG) para la web es una habilidad fundamental en el dise\u00f1o y desarrollo web moderno. Los SVG son formatos de imagen basados en XML que ofrecen numeros","copyrightYear":"2024","articleSection":"programaci\u00f3n","articleBody":"Crear y exportar gr\u00e1ficos vectoriales escalables (SVG) para la web es una habilidad fundamental en el dise\u00f1o y desarrollo web moderno. Los SVG son formatos de imagen basados en XML que ofrecen numerosas ventajas, como la escalabilidad sin p\u00e9rdida de calidad y la capacidad de manipulaci\u00f3n con CSS y JavaScript. Aqu\u00ed te presento algunas recomendaciones para crear y exportar SVG para la web:Mant\u00e9n la simplicidad: Los SVG funcionan mejor con formas simples y l\u00edneas limpias. Evita la complejidad excesiva y los detalles minuciosos que puedan aumentar innecesariamente el tama\u00f1o del archivo.Utiliza un software adecuado: Puedes crear gr\u00e1ficos SVG utilizando herramientas como Adobe Illustrator, Inkscape (software de c\u00f3digo abierto) o incluso editores de texto simples. Aseg\u00farate de utilizar una herramienta que te permita exportar el SVG de manera eficiente.Organiza tu documento: Si est\u00e1s creando gr\u00e1ficos complejos, organiza tu documento SVG con etiquetas para agrupar elementos relacionados. Esto facilitar\u00e1 la manipulaci\u00f3n y el mantenimiento del SVG en el futuro.Optimiza el c\u00f3digo SVG: Despu\u00e9s de crear el SVG, revisa el c\u00f3digo para eliminar cualquier elemento o atributo redundante. Puedes utilizar herramientas en l\u00ednea o complementos de software para optimizar autom\u00e1ticamente el c\u00f3digo SVG y reducir el tama\u00f1o del archivo.Considera la accesibilidad: Aseg\u00farate de que tu SVG sea accesible para todos los usuarios, incluidos aquellos con discapacidades visuales. Proporciona descripciones alternativas utilizando el atributo aria-label o aria-labelledby para elementos importantes dentro del SVG.Evita el uso de texto en trazos: Siempre que sea posible, utiliza texto real en lugar de convertir el texto en trazos dentro del SVG. Esto permitir\u00e1 que el texto sea indexado por los motores de b\u00fasqueda y que sea accesible para lectores de pantalla.Selecciona el formato de exportaci\u00f3n adecuado: Cuando exportes el SVG, elige el formato que mejor se adapte a tus necesidades. Si est\u00e1s utilizando Illustrator, por ejemplo, puedes exportar el SVG con diferentes configuraciones de optimizaci\u00f3n seg\u00fan si se trata de un gr\u00e1fico simple o complejo.Prueba en diferentes navegadores y dispositivos: Despu\u00e9s de integrar el SVG en tu sitio web, aseg\u00farate de probar su apariencia y funcionalidad en varios navegadores y dispositivos. Algunas caracter\u00edsticas de SVG pueden comportarse de manera diferente seg\u00fan el navegador, por lo que es importante realizar pruebas exhaustivas.Aprende sobre animaciones SVG: Los SVG son excelentes para crear animaciones vectoriales escalables. Investiga sobre t\u00e9cnicas de animaci\u00f3n SVG utilizando CSS o JavaScript para agregar interactividad y dinamismo a tus gr\u00e1ficos.Sigue aprendiendo y experimentando: El dise\u00f1o y la optimizaci\u00f3n de SVG para la web es un campo en constante evoluci\u00f3n. Mantente al d\u00eda con las \u00faltimas t\u00e9cnicas y herramientas, y no temas experimentar con nuevas ideas para mejorar tus habilidades en la creaci\u00f3n y exportaci\u00f3n de SVG.M\u00e1s Informaciones\n\nPor supuesto, aqu\u00ed tienes m\u00e1s detalles sobre c\u00f3mo crear y exportar gr\u00e1ficos vectoriales escalables (SVG) para la web:Mant\u00e9n la simplicidad y la legibilidad del c\u00f3digo: Al dise\u00f1ar tus gr\u00e1ficos en un software de edici\u00f3n vectorial como Adobe Illustrator o Inkscape, es importante mantener la simplicidad en tus dise\u00f1os. Los SVG funcionan mejor con formas simples y l\u00edneas limpias. Adem\u00e1s, aseg\u00farate de que el c\u00f3digo SVG resultante sea legible y est\u00e9 bien estructurado. Esto facilitar\u00e1 la edici\u00f3n manual del c\u00f3digo en caso necesario y mejorar\u00e1 la eficiencia del renderizado en los navegadores.Utiliza atributos y elementos sem\u00e1nticos: Los SVG admiten una amplia gama de elementos y atributos que pueden mejorar la sem\u00e1ntica y accesibilidad de tus gr\u00e1ficos. Por ejemplo, puedes utilizar y para proporcionar descripciones textuales de tus gr\u00e1ficos, lo que es \u00fatil para usuarios con discapacidad visual y para mejorar el SEO. Del mismo modo, puedes utilizar atributos como role y aria-* para mejorar la accesibilidad de tus SVG.Optimiza el rendimiento: La optimizaci\u00f3n del rendimiento es crucial al exportar SVG para la web. Esto incluye reducir el tama\u00f1o del archivo SVG tanto como sea posible sin comprometer la calidad visual. Puedes lograr esto eliminando elementos, combinando trazos y utilizando atributos de presentaci\u00f3n de manera eficiente. Tambi\u00e9n es importante considerar el uso de t\u00e9cnicas de carga diferida o lazy loading para mejorar los tiempos de carga de la p\u00e1gina.Cuida la compatibilidad con navegadores: Aunque los SVG son ampliamente compatibles con la mayor\u00eda de los navegadores modernos, es importante realizar pruebas exhaustivas en diferentes navegadores y versiones para garantizar una experiencia consistente para todos los usuarios. Algunas caracter\u00edsticas avanzadas de SVG pueden no ser compatibles con versiones m\u00e1s antiguas de ciertos navegadores, por lo que es importante tener esto en cuenta al dise\u00f1ar y exportar tus gr\u00e1ficos.Aprovecha las capacidades de animaci\u00f3n y interactividad: Una de las ventajas clave de los SVG es su capacidad para admitir animaciones y efectos interactivos directamente en el c\u00f3digo SVG utilizando CSS o JavaScript. Esto te permite crear gr\u00e1ficos din\u00e1micos y atractivos sin necesidad de usar im\u00e1genes est\u00e1ticas o tecnolog\u00edas externas. Investiga sobre t\u00e9cnicas de animaci\u00f3n SVG, como las transiciones CSS y las animaciones SMIL, para agregar interactividad a tus gr\u00e1ficos.Explora el uso de filtros y efectos: Los SVG admiten una amplia variedad de filtros y efectos que pueden aplicarse a elementos gr\u00e1ficos para mejorar su apariencia visual. Estos incluyen desenfoques, sombras, saturaci\u00f3n de color y muchos m\u00e1s. Experimenta con diferentes efectos para crear gr\u00e1ficos visualmente impactantes y atractivos.Integra SVG en tu flujo de trabajo de desarrollo web: Para aprovechar al m\u00e1ximo los SVG en tu sitio web, es importante integrarlos de manera efectiva en tu flujo de trabajo de desarrollo web. Esto puede implicar el uso de sistemas de control de versiones para administrar tus archivos SVG, automatizaci\u00f3n de tareas para optimizar y procesar tus gr\u00e1ficos autom\u00e1ticamente, y la implementaci\u00f3n de t\u00e9cnicas de carga y renderizado eficientes en tu sitio web.Mantente actualizado con las mejores pr\u00e1cticas: El dise\u00f1o y la optimizaci\u00f3n de SVG para la web es un campo en constante evoluci\u00f3n, con nuevas t\u00e9cnicas y herramientas que surgen regularmente. Mantente al d\u00eda con las \u00faltimas tendencias y mejores pr\u00e1cticas en el dise\u00f1o web y SVG para garantizar que tus gr\u00e1ficos sean modernos, eficientes y compatibles con los est\u00e1ndares actuales de la web.","publisher":{"@id":"#Publisher","@type":"Organization","name":"Revista Completa","logo":{"@type":"ImageObject","url":"https:\/\/revistacompleta.com\/wp-content\/uploads\/2023\/12\/revista-completa-high-resolution-logo-transparent.png"},"sameAs":["https:\/\/www.facebook.com\/larevistacompleta\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/revistacompleta.com\/consejos-para-svg-web\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"admin","url":"https:\/\/revistacompleta.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/revistacompleta.com\/wp-content\/uploads\/2023\/12\/revista-completa-high-resolution-logo.png","width":2000,"height":1500}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Consejos%20para%20SVG%20Web&url=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://revistacompleta.com/consejos-para-svg-web/&title=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://revistacompleta.com/consejos-para-svg-web/&name=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://revistacompleta.com/consejos-para-svg-web/&description=Consejos%20para%20SVG%20Web&media=https://revistacompleta.com/wp-content/uploads/2023/12/revista-completa-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://revistacompleta.com/consejos-para-svg-web/&title=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="https://vk.com/share.php?url=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}"> <span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">VKontakte</span> </a> <a href="mailto:?subject=Consejos%20para%20SVG%20Web&body=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Compartir por correo electrónico" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Compartir por correo electrónico</span> </a> <a href="#" rel="external noopener nofollow" title="Imprimir" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Imprimir</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </article><!-- #the-post /--> <div class="post-components"> <div class="stream-item stream-item-below-post-comments"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> </div><!-- .post-components /--> </div><!-- .main-content --> </div><!-- .main-content-row /--></div><!-- #content /--><div class="stream-item stream-item-above-footer"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div><!-- .container /--> </div><!-- #Footer-widgets-container /--> <div id="site-info" class="site-info"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first"><footer> © Derechos de Autor 2024, Todos los Derechos Reservados  |  <span style="color:red;" class="tie-icon-heart"></span> </footer> </div><div class="copyright-text copyright-text-second">  |  <a href="https://revistacompleta.com/about-us/">Acerca de Nosotros</a>  |  <a href="https://revistacompleta.com/contact-us/">Contáctanos</a>  |  <a href="https://revistacompleta.com/report/">Reportar</a>  |  <a href="https://revistacompleta.com/terms-and-conditions/">Términos y Condiciones</a>  |  <a href="https://revistacompleta.com/privacy-policy/">Política de Privacidad</a>  |  <a href="https://revistacompleta.com/faq/">Preguntas Frecuentes (FAQ)</a>  |  <a href="https://revistacompleta.com/disclaimer/">Aviso Legal</a></div><ul class="social-icons"><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/larevistacompleta/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #site-info /--> </footer><!-- #footer /--> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Consejos%20para%20SVG%20Web&url=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://revistacompleta.com/consejos-para-svg-web/&title=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://revistacompleta.com/consejos-para-svg-web/&name=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://revistacompleta.com/consejos-para-svg-web/&description=Consejos%20para%20SVG%20Web&media=https://revistacompleta.com/wp-content/uploads/2023/12/revista-completa-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://revistacompleta.com/consejos-para-svg-web/&title=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://revistacompleta.com/consejos-para-svg-web/&redirect_uri=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://revistacompleta.com/consejos-para-svg-web/&redirect_uri=https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Consejos%20para%20SVG%20Web%20https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://revistacompleta.com/consejos-para-svg-web/&text=Consejos%20para%20SVG%20Web" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=Consejos%20para%20SVG%20Web%20https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Consejos%20para%20SVG%20Web%20https://revistacompleta.com/consejos-para-svg-web/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> <div class="mobile-share-buttons-spacer"></div> <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"> <span class="tie-icon-angle-up"></span> <span class="screen-reader-text">Botón volver arriba</span> </a> </div><!-- #tie-wrapper /--> <aside class=" side-aside normal-side dark-skin dark-widgetized-area appear-from-left" aria-label="Barra lateral Secundaria" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn"> <span class="screen-reader-text">Cerrar</span> </a><!-- .close-side-aside /--> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://revistacompleta.com/"> <label> <span class="screen-reader-text">Buscar:</span> <input type="search" class="search-field" placeholder="Buscar …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Buscar" /> </form> </div><!-- #mobile-search /--> <div id="mobile-menu" class=""> </div><!-- #mobile-menu /--> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/larevistacompleta/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- #mobile-social-icons /--> </div><!-- #mobile-container /--> </div><!-- .side-aside-wrapper /--> </aside><!-- .side-aside /--> </div><!-- #tie-container /--> </div><!-- .background-overlay /--> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Preferencias de consentimiento" style="background-color:#0056a7"> <button class="cky-btn-revisit" aria-label="Preferencias de consentimiento"> <img src="https://revistacompleta.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#f4f4f4;color:#212121"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#212121">Valoramos tu privacidad</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#212121"> <p>Utilizamos cookies para mejorar tu experiencia de navegación, ofrecer anuncios o contenido personalizado y analizar nuestro tráfico. Al hacer clic en 'Aceptar Todo', aceptas nuestro uso de cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Personalizar" data-cky-tag="settings-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc">Personalizar</button> <button class="cky-btn cky-btn-reject" aria-label="Rechazar Todo" data-cky-tag="reject-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc">Rechazar Todo</button> <button class="cky-btn cky-btn-accept" aria-label="Aceptar Todo" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#1863dc;border-color:#1863dc">Aceptar Todo</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#212121;background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#212121">Personalizar Preferencias de Consentimiento</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://revistacompleta.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#212121"> <p>Utilizamos cookies para ayudarte a navegar eficientemente y realizar funciones específicas. Encontrarás información detallada sobre todas las cookies en cada categoría de consentimiento a continuación.</p> <p>Las cookies categorizadas como 'Necesarias' se almacenan en tu navegador ya que son esenciales para habilitar las funcionalidades básicas del sitio.</p> <p>También utilizamos cookies de terceros que nos ayudan a analizar cómo utilizas este sitio web, almacenar tus preferencias y proporcionar contenido y anuncios relevantes para ti. Estas cookies solo se almacenarán en tu navegador con tu consentimiento previo.</p> <p>Puedes elegir habilitar o deshabilitar algunas o todas estas cookies, pero desactivar algunas de ellas puede afectar tu experiencia de navegación.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#212121">Necessary</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#212121">Functional</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#212121">Analytics</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#212121">Performance</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#212121">Advertisement</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="Rechazar Todo" data-cky-tag="detail-reject-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc"> Rechazar Todo </button> <button class="cky-btn cky-btn-preferences" aria-label="Guardar mis preferencias" data-cky-tag="detail-save-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc"> Guardar mis preferencias </button> <button class="cky-btn cky-btn-accept" aria-label="Aceptar Todo" data-cky-tag="detail-accept-button" style="color:#ffffff;background-color:#1863dc;border-color:#1863dc"> Aceptar Todo </button> </div></div></div></div></script> <script> function _katexRender(rootElement) { const eles = rootElement.querySelectorAll(".katex-eq:not(.katex-rendered)"); for(let idx=0; idx < eles.length; idx++) { const ele = eles[idx]; ele.classList.add("katex-rendered"); try { katex.render( ele.textContent, ele, { displayMode: ele.getAttribute("data-katex-display") === 'true', throwOnError: false } ); } catch(n) { ele.style.color="red"; ele.textContent = n.message; } } } function katexRender() { _katexRender(document); } document.addEventListener("DOMContentLoaded", function() { katexRender(); // Perform a KaTeX rendering step when the DOM is mutated. const katexObserver = new MutationObserver(function(mutations) { [].forEach.call(mutations, function(mutation) { if (mutation.target && mutation.target instanceof Element) { _katexRender(mutation.target); } }); }); const katexObservationConfig = { subtree: true, childList: true, attributes: true, characterData: true }; katexObserver.observe(document.body, katexObservationConfig); }); </script> <div id="ays_tooltip" ><div id="ays_tooltip_block"><p>¡Este contenido está protegido contra copia! Para compartirlo, utilice los botones de compartir rápido o copie el enlace.</p> </div></div> <style> #ays_tooltip,.ays_tooltip_class { display: none; position: absolute; z-index: 999999999; background-color: #ffffff; background-repeat: no-repeat; background-position: center center; background-size: cover; opacity:1; border: 1px solid #b7b7b7; border-radius: 3px; box-shadow: rgba(0,0,0,0) 0px 0px 15px 1px; color: #00872a; padding: 5px; text-transform: none; ; } #ays_tooltip > *, .ays_tooltip_class > * { color: #00872a; font-size: 12px; } #ays_tooltip_block { font-size: 12px; backdrop-filter: blur(0px); } @media screen and (max-width: 768px){ #ays_tooltip,.ays_tooltip_class { font-size: 12px; } #ays_tooltip > *, .ays_tooltip_class > * { font-size: 12px; } } </style> <style> *:not(input):not(textarea)::selection { background-color: transparent !important; color: inherit !important; } *:not(input):not(textarea)::-moz-selection { background-color: transparent !important; color: inherit !important; } </style> <script> function stopPrntScr() { var inpFld = document.createElement("input"); inpFld.setAttribute("value", "Access Denied"); inpFld.setAttribute("width", "0"); inpFld.style.height = "0px"; inpFld.style.width = "0px"; inpFld.style.border = "0px"; document.body.appendChild(inpFld); inpFld.select(); document.execCommand("copy"); inpFld.remove(inpFld); } (function ($) { 'use strict'; $(function () { let all = $('*').not('script, meta, link, style, noscript, title'), tooltip = $('#ays_tooltip'), tooltipClass = "mouse"; if (tooltipClass == "mouse" || tooltipClass == "mouse_first_pos") { $(document).on('mousemove', function (e) { let cordinate_x = e.pageX; let cordinate_y = e.pageY; let windowWidth = $(window).width(); if (cordinate_y < tooltip.outerHeight()) { tooltip.css({'top': (cordinate_y + 10) + 'px'}); } else { tooltip.css({'top': (cordinate_y - tooltip.outerHeight()) + 'px'}); } if (cordinate_x > (windowWidth - tooltip.outerWidth())) { tooltip.css({'left': (cordinate_x - tooltip.outerWidth()) + 'px'}); } else { tooltip.css({'left': (cordinate_x + 5) + 'px'}); } }); } else { tooltip.addClass(tooltipClass); } $(document).on('contextmenu', function (e) { let target = $(event.target); let t = e || window.event; let n = t.target || t.srcElement; if (!target.is("") && (!target.is("1") && !target.is("img")) && (!target.is("") && !target.is("a") && n.parentElement.nodeName !== "A") ) { if (n.nodeName !== "A" ) { show_tooltip(1 ); audio_play(); } return false; } }); $(document).on('contextmenu', function (e) { let target = $(event.target); if (target.is("img") || target.is("div.ays_tooltip_class")) { let t = e || window.event; let n = t.target || t.srcElement; if (n.nodeName !== "A") { show_tooltip(1 ); audio_play(); } return false; } }); $(document).on('dragstart', function () { let target = $(event.target); if (!target.is("")) { show_tooltip(1 ); audio_play(); return false; } }); $(window).on('keydown', function (event) { var sccp_selObj = window.getSelection(); var check_selectors = true; if (!sccp_selObj.rangeCount < 1) { var sccp_selRange = sccp_selObj.getRangeAt(0); var sccp_selection_selector = sccp_selRange.startContainer.parentElement; check_selectors = !$(sccp_selection_selector).is(""); } if (check_selectors) { var isOpera = (BrowserDetect.browser === "Opera"); var isFirefox = (BrowserDetect.browser === 'Firefox'); var isSafari = (BrowserDetect.browser === 'Safari'); var isIE = (BrowserDetect.browser === 'Explorer'); var isChrome = (BrowserDetect.browser === 'Chrome'); var isMozilla = (BrowserDetect.browser === 'Mozilla'); if (BrowserDetect.OS === 'Windows') { if (isChrome) { if (((event.ctrlKey && event.shiftKey) && ( event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 68 || event.keyCode === 67))) { show_tooltip(1); audio_play(); return false; } } if (isFirefox) { if (((event.ctrlKey && event.shiftKey) && ( event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 || event.keyCode === 75 || event.keyCode === 69)) || event.keyCode === 118 || (event.keyCode === 112 && event.shiftKey) || (event.keyCode === 115 && event.shiftKey) || (event.keyCode === 118 && event.shiftKey) || (event.keyCode === 120 && event.shiftKey)) { show_tooltip(1); audio_play(); return false; } } if (isOpera) { if (((event.ctrlKey && event.shiftKey) && ( event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 || event.keyCode === 88 || event.keyCode === 69))) { show_tooltip(1); audio_play(); return false; } } if (isIE) { if ((event.keyCode === 123 && event.shiftKey)) { show_tooltip(1); audio_play(); return false; } } if (isMozilla) { if ((event.ctrlKey && event.keyCode === 73) || (event.altKey && event.keyCode === 68)) { show_tooltip(1); audio_play(); return false; } } if ((event.keyCode === 83 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 65 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if (event.keyCode === 67 && event.ctrlKey && !event.shiftKey) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 86 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 88 && event.ctrlKey)) { show_tooltip(1 ); audio_play(); return false; } if ((event.keyCode === 85 && event.ctrlKey)) { show_tooltip(1 ); audio_play(); return false; } if (event.keyCode === 123 || (event.keyCode === 123 && event.shiftKey)) { show_tooltip(1); audio_play(); return false; } } else if (BrowserDetect.OS === 'Linux') { if (isChrome) { if ( ( (event.ctrlKey && event.shiftKey) && (event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 ) ) || (event.ctrlKey && event.keyCode === 85) ) { show_tooltip(1); audio_play(); return false; } } if (isFirefox) { if (((event.ctrlKey && event.shiftKey) && (event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 || event.keyCode === 75 || event.keyCode === 69)) || event.keyCode === 118 || event.keyCode === 116 || (event.keyCode === 112 && event.shiftKey) || (event.keyCode === 115 && event.shiftKey) || (event.keyCode === 118 && event.shiftKey) || (event.keyCode === 120 && event.shiftKey) || (event.keyCode === 85 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } } if (isOpera) { if (((event.ctrlKey && event.shiftKey) && (event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 || event.keyCode === 88 || event.keyCode === 69)) || (event.ctrlKey && event.keyCode === 85)) { show_tooltip(1); audio_play(); return false; } } if ((event.keyCode === 83 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if (event.keyCode === 65 && event.ctrlKey) { show_tooltip(1); audio_play(); return false; } if (event.keyCode === 67 && event.ctrlKey && !event.shiftKey) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 86 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 88 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 85 && event.ctrlKey)) { show_tooltip(1 ); audio_play(); return false; } if (event.keyCode === 123 || (event.keyCode === 123 && event.shiftKey)) { show_tooltip(1); audio_play(); return false; } } else if (BrowserDetect.OS === 'Mac') { if (isChrome || isSafari || isOpera || isFirefox) { if (event.metaKey && ( event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 69 || event.keyCode === 75)) { show_tooltip(1); audio_play(); return false; } } if ((event.keyCode === 83 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 65 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 67 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 86 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 88 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 85 && event.metaKey)) { show_tooltip(1 ); audio_play(); return false; } if (event.keyCode === 123) { show_tooltip(1); audio_play(); return false; } } } }); function disableSelection(e) { if (typeof e.onselectstart !== "undefined") e.onselectstart = function () { show_tooltip( ); audio_play(); return false }; else if (typeof e.style.MozUserSelect !== "undefined") e.style.MozUserSelect = "none"; else e.onmousedown = function () { show_tooltip(); audio_play(); return false }; e.style.cursor = "default" } var msg_count = 1; function show_tooltip(mess) { if (mess && msg_count == 1) { if (tooltipClass == 'mouse_first_pos') { if ($('#ays_tooltip2').length > 0) { $('#ays_tooltip2').remove(); } var tooltip2 = tooltip.clone().prop('id','ays_tooltip2').insertBefore(tooltip); $('#ays_tooltip2').addClass('ays_tooltip_class'); tooltip2.css({'display': 'table'}); $('#ays_tooltip').fadeOut(); setTimeout(function () { tooltip2.remove(); }, 1000); }else{ tooltip.css({'display': 'table'}); setTimeout(function () { $('#ays_tooltip').fadeOut(500); }, 1000); } } } function audio_play(audio) { if (audio) { var audio = document.getElementById("sccp_public_audio"); if (audio) { audio.currentTime = 0; audio.play(); } } } }); })(jQuery); var copyrightText = ''; var copyrightIncludeUrl = ''; var copyrightWord = ''; function copyToClipboard(text) { var textarea = document.createElement("textarea"); textarea.textContent = text; textarea.style.position = "fixed"; document.body.appendChild(textarea); textarea.select(); try { return document.execCommand("cut"); } catch (ex) { console.warn("Copy to clipboard failed.", ex); return false; } finally { document.body.removeChild(textarea); } } function htmlDecode(input) { var doc = new DOMParser().parseFromString(input, "text/html"); return doc.documentElement.textContent; } var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (var i = 0; i < data.length; i++) { var dataString = data[i].string; var dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) !== -1) return data[i].identity; } else if (dataProp) return data[i].identity; } }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index === -1) return; return parseFloat(dataString.substring(index + this.versionSearchString.length + 1)); }, dataBrowser: [{ string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera", versionSearch: "Version" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { // for newer Netscapes (6+) string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { // for older Netscapes (4-) string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" }], dataOS: [{ string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" }] }; BrowserDetect.init(); // }, false); </script> <div id="autocomplete-suggestions" class="autocomplete-suggestions"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-desktop" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Cerrar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Buscar"> <form method="get" class="tie-popup-search-form" action="https://revistacompleta.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Buscar por" autocomplete="off" placeholder="Teclea y pulsa Enter" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Buscar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Cerrar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Buscar"> <form method="get" class="tie-popup-search-form" action="https://revistacompleta.com/"> <input class="tie-popup-search-input is-ajax-search" inputmode="search" type="text" name="s" title="Buscar por" autocomplete="off" placeholder="Buscar por" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Buscar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.9.6" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-extra"> /* <![CDATA[ */ var wpcf7 = {"api":{"root":"https:\/\/revistacompleta.com\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.6" id="contact-form-7-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.5.5" id="katex-js"></script> <script type="text/javascript" id="tie-scripts-js-extra"> /* <![CDATA[ */ var tie = {"is_rtl":"","ajaxurl":"https:\/\/revistacompleta.com\/wp-admin\/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"","lazyload":"","select_share":"true","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"upwards","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"1","lang_no_results":"Sin resultados","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; /* ]]> */ </script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.0.2" id="tie-scripts-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.0.2" id="tie-js-ilightbox-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.0.2" id="tie-js-sliders-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.0.2" id="tie-js-shortcodes-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/desktop.min.js?ver=7.0.2" id="tie-js-desktop-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/live-search.js?ver=7.0.2" id="tie-js-livesearch-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.0.2" id="tie-js-single-js"></script> <script> WebFontConfig ={ google:{ families: [ 'Poppins:600,regular:latin&display=swap' ] } }; (function(){ var wf = document.createElement('script'); wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.defer = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script><script type="text/javascript"> jQuery.ajax({ type : "GET", url : "https://revistacompleta.com/wp-admin/admin-ajax.php", data : "postviews_id=35723&action=tie_postviews", cache: !1, success: function( data ){ jQuery(".single-post-meta").find(".meta-views").html( data ); } }); </script> </body> </html>