{"id":1714,"date":"2014-10-02T14:06:56","date_gmt":"2014-10-02T12:06:56","guid":{"rendered":"https:\/\/www.hiberus.com\/blog\/?p=1714"},"modified":"2023-11-28T11:12:15","modified_gmt":"2023-11-28T10:12:15","slug":"guia-de-uso-de-svg-paso-paso-parte-1-por-que-usar-svg","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/guia-de-uso-de-svg-paso-paso-parte-1-por-que-usar-svg\/","title":{"rendered":"Gu\u00eda de uso de SVG paso a paso. Parte 1: \u00bfpor qu\u00e9 usar SVG?"},"content":{"rendered":"

 <\/p>\n

SVG<\/strong> son las siglas de Scalable Vector Graphics<\/strong> que, traducido al castellano, viene a ser un archivo vectorial y, como tal, es escalable a cualquier tama\u00f1o sin perder resoluci\u00f3n.<\/p>\n

Hasta aqu\u00ed podemos intuir que necesitaremos un programa de tratamiento de archivos vectoriales como Illustrator para poder generarlos, pero antes de ponernos manos a la obra debemos informarnos bien de sus ventajas e inconvenientes para no volvernos locos:<\/p>\n

\u00bfPor qu\u00e9 usar SVG?<\/h2>\n

Ventajas<\/strong><\/p>\n

Love Retina!<\/strong> Correcta visualizaci\u00f3n en cualquier tipo de dispositivo y tama\u00f1o de pantalla. Sin p\u00e9rdida de calidad sea cual sea el tama\u00f1o de reproducci\u00f3n.<\/p>\n

Peso m\u00ednimo de la imagen.<\/strong> Esto se traduce en una notable optimizaci\u00f3n del peso de nuestro site, lo que repercute en una mejora sustancial de la experiencia de usuario.<\/p>\n

Interacci\u00f3n.<\/strong> Los svg nos permiten interactuar con ellos a trav\u00e9s del CSS o del JavaScript, ofreci\u00e9ndonos un control de las animaciones muy similar al que al que est\u00e1bamos acostumbrados con el malogrado Flash.<\/p>\n

Veamos un sencillo ejemplo de su utilidad, al posicionarnos encima de un enlace con icono podemos cambiar la imagen, a trav\u00e9s del CSS, sin tener la necesidad de generar una imagen diferente.<\/p>\n

 <\/p>\n

Inconvenientes<\/strong><\/p>\n

La incompatibilidad con algunos navegadores como IE8 (aunque Microsoft ya ha dejado de darle soporte algunos clientes lo siguen pidiendo) y Android 2.3 (que son el 1% de los usuarios):<\/p>\n

Pero no os preocup\u00e9is porque tenemos soluciones, las cuales las veremos en pr\u00f3ximas entregas de este tutorial.<\/p>\n

Adem\u00e1s, es muy puntilloso con las propiedades utilizadas en su implementaci\u00f3n, seg\u00fan el navegador en el que testeemos nuestro site. \u00a1Cuidado con intentar ahorrarnos l\u00edneas de c\u00f3digo!<\/p>\n

<\/h2>\n

\u00bfC\u00f3mo generar un archivo SVG?<\/h2>\n

Nosotros usamos el programa de edici\u00f3n de archivos vectoriales Adobe Illustrator, pero si no tenemos acceso al mismo, podemos recurrir a programas online de generaci\u00f3n de SVG.
\nAbrimos nuestra ilustraci\u00f3n vectorial en Illustrator y la guardamos como SVG (nosotros optamos por la versi\u00f3n 1.1).<\/p>\n

 <\/p>\n

\"\u00bfC\u00f3mo<\/p>\n

 <\/p>\n

IMPORTANTE: tiene que ser vectorial, no vale con una imagen incrustada en Illustrator, as\u00ed que en muchos casos \u00a1no nos quedar\u00e1 otra opci\u00f3n que emplear tiempo en vectorizar elementos que nos proporcione el cliente!<\/p>\n

<\/h2>\n

\u00bfC\u00f3mo se usan los SVG?<\/h2>\n

Existen varias maneras de implementar SVG en nuestros sites:<\/p>\n

    \n
  1. En l\u00ednea en el c\u00f3digo HTML5:
    \n<svg>\u2026\u2026<\/svg>
    \nEste c\u00f3digo lo obtenemos al abrir el archivo SVG con un editor Html como Notepad++, por ejemplo.<\/li>\n<\/ol>\n

    \"\u00bfC\u00f3mo<\/p>\n

      \n
    1. Como imagen:<\/li>\n<\/ol>\n

      \"Insertar<\/p>\n

        \n
      1. Como objeto dentro de nuestro c\u00f3digo HTML: <object><\/li>\n<\/ol>\n

        \"SVG<\/p>\n

          \n
        1. Utilizando un iframe:<\/li>\n<\/ol>\n

          \"Utilizar<\/p>\n

            \n
          1. En nuestro CSS como background-image:<\/li>\n<\/ol>\n

            \"SVG<\/p>\n

            La decisi\u00f3n de usar un m\u00e9todo u otro depender\u00e1 de varios factores que explicaremos con mayor detenimiento en la segunda parte de este tutorial.<\/p>\n

            En Hiberus tenemos un \u00e1rea especializada en negocios digitales. Ponte en contacto con nosotros<\/a> y te estaremos encantados de ayudarte.<\/p>\n

             <\/p>\n","protected":false},"excerpt":{"rendered":"

              SVG son las siglas de Scalable Vector Graphics que, traducido al castellano, viene a ser un archivo vectorial y, como tal,…<\/p>\n","protected":false},"author":35,"featured_media":1724,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3],"tags":[31],"class_list":{"0":"post-1714","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"tag-diseno"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/1714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=1714"}],"version-history":[{"count":2,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/1714\/revisions"}],"predecessor-version":[{"id":18849,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/1714\/revisions\/18849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/1724"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=1714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=1714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=1714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}