{"id":7338,"date":"2021-12-03T13:00:00","date_gmt":"2021-12-03T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=7338"},"modified":"2022-03-08T15:05:55","modified_gmt":"2022-03-08T14:05:55","slug":"que-es-el-formato-svg","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/que-es-el-formato-svg\/","title":{"rendered":"\u00bfQu\u00e9 es el formato SVG?"},"content":{"rendered":"\n

El SVG (Scalable Vector Graphics) es un formato vectorial cada vez m\u00e1s utilizado en la programaci\u00f3n web<\/strong>. A diferencia de los formatos de imagen o video m\u00e1s usados, como los JPG, PNG o GIF, los SVG nos dan todas las ventajas de los formatos vectoriales: Permiten la mejor definici\u00f3n a cualquier escala<\/strong>. Pero esta no es la \u00fanica ventaja que nos ofrece este formato. En el art\u00edculo de hoy hablaremos sobre los beneficios de hacer uso de este formato en nuestros dise\u00f1os web<\/a> y veremos algunas de las etiquetas m\u00e1s b\u00e1sicas.<\/p>\n\n\n\n\n\n\n\n

\u00bfPor qu\u00e9 no es tan conocido el formato SVG?<\/h2>\n\n\n\n
\n
\n

El formato SVG es un formato abierto, basado en XML que crea archivos 2D totalmente escalables<\/strong>. Las primeras versiones de este formato daban problemas en diferentes navegadores. Sin embargo, a d\u00eda de hoy, los SVG est\u00e1n ampliamente soportados por todos los navegadores<\/strong>. Es cierto que en ocasiones hay determinados atributos que, en ciertos navegadores, pueden no visualizarse correctamente, pare ello, la p\u00e1gina web Can I use<\/a> realiza un an\u00e1lisis de cada navegador y sus actualizaciones y los atributos y etiquetas SVG que estos soportan. Pero, a excepci\u00f3n de alg\u00fan atributo concreto, en general el SVG est\u00e1 soportado por todos los navegadores.<\/p>\n<\/div>\n\n\n\n

\n
\"Formato<\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n

Principales ventajas del SVG<\/h2>\n\n\n\n

Totalmente escalable. Nos ofrece la m\u00e1xima calidad, tambi\u00e9n al hacer zoom.<\/h3>\n\n\n\n

Como ya hemos mencionado anteriormente, la principal ventaja del formato SVG es su escalabilidad. Al final, los formatos vectoriales nos aseguran siempre la m\u00e1xima calidad, sin perdida de resoluci\u00f3n. <\/p>\n\n\n\n

Su peso es menor que en las im\u00e1genes en formato de bits como pueden ser los PNG o JPG<\/h3>\n\n\n\n

Adem\u00e1s de ser archivos muy poco pesados, estos pueden optimizarse y comprimirse, por lo que los SVG nos dan la posibilidad de optimizar la velocidad de carga de nuestros sitios web<\/strong>, ofreciendo la mayor calidad. <\/p>\n\n\n\n

En relaci\u00f3n a esto, los SVG se cargan de forma progresiva<\/strong>, es decir, el usuario no tiene que esperar a que la imagen se descargue del todo, sino que se muestra de manera progresiva, mejorando la experiencia de usuario evitando la inquietud del usuario al ver la pantalla en blanco mientras se carga el archivo.<\/p>\n\n\n\n

Se pueden crear im\u00e1genes responsive.<\/h3>\n\n\n\n

Otra de las razones principales por las que cada vez m\u00e1s desarrolladores hacen uso de este formato, es la posibilidad de crear im\u00e1genes responsive. Hoy en d\u00eda todos los sitios webs necesitan ser totalmente adaptables al tama\u00f1o de la pantalla de cualquier dispositivo. Hemos dejado atr\u00e1s la \u00e9poca en la que todos los usuarios visualizaban las webs \u00fanicamente en sus ordenadores, hoy en d\u00eda la mayor\u00eda de las b\u00fasquedas se hacen desde un dispositivo m\u00f3vil o una tablet.<\/p>\n\n\n\n

Por ello, todos los sitios web deber\u00edan estar dise\u00f1ados para adaptarse a cualquier pantalla, incluyendo los gr\u00e1ficos, iconos e im\u00e1genes. Cuanto menor es el tama\u00f1o de la pantalla, menor ser\u00e1 el tama\u00f1o de estos, y cuantos menos detalles tengan, mayor legibilidad tendr\u00e1n. Gracias a las posibilidades que nos ofrece el formato SVG, podemos dise\u00f1ar iconos totalmente responsive, que se vayan reduciendo tanto en tama\u00f1o como en la cantidad de detalles a medida que el tama\u00f1o de la pantalla vaya disminuyendo.<\/p>\n\n\n\n

Como ejemplo de esto podemos encontrar la p\u00e1gina Responsive Logos<\/a>, que utiliza marcas conocidas, como CocaCola o Chanel, y los adapta a todos los tama\u00f1os de pantalla, reduciendo y eliminando detalles en las resoluciones m\u00e1s peque\u00f1as.<\/p>\n\n\n\n

\n
\n
\"Formato<\/figure><\/div>\n\n\n\n
\"Formato<\/figure>\n\n\n\n
\"Formato<\/figure>\n<\/div>\n\n\n\n
\n
\"Formato<\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n

Se le pueden aplicar estilos CSS y modificaciones con Java Script<\/h3>\n\n\n\n

La posibilidad de aplicar estilos CSS<\/a> y modificaciones con JS a los SVG nos permite crear im\u00e1genes que podremos transformar en cualquier momento mediante cambios de color, de forma, de tama\u00f1o y de posici\u00f3n. Cada vez podemos ver m\u00e1s p\u00e1ginas web que hacen uso de los SVG como elementos de interacci\u00f3n con el usuario, generando<\/strong> animaciones o movimiento<\/strong> a trav\u00e9s de CSS y JS.<\/p>\n\n\n\n

Etiquetas b\u00e1sicas en SVG<\/h2>\n\n\n\n

Dentro de la etiqueta SVG podemos crear un sin fin de formas, ilustraciones e incluso animaciones. Hoy veremos las etiquetas para las formas m\u00e1s b\u00e1sicas en SVG. <\/p>\n\n\n\n

Formas b\u00e1sicas en SVG<\/h3>\n\n\n\n

Antes de comenzar a dibujar el SVG habr\u00e1 que declarar la etiqueta que tendr\u00e1 una estructura similar a esta:<\/p>\n\n\n\n

<svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0\" y=\"0\" width=\"400\" height=\"230\" viewBox=\"0 0 400 230\"><\/code><\/pre>\n\n\n\n
A continuaci\u00f3n se declarar\u00e1n las etiquetas de las formas que queramos dibujar, hoy veremos algunas de las formas simples que podemos utilizar:<\/p>\n\n\n\n
  1. Rectangle<\/strong><\/li><\/ol>\n\n\n\n
    Etiqueta para obtener un rect\u00e1ngulo:<\/p>\n\n\n\n
    \n
    \n
    <rect x=\"200\" y=\"0\" width=\"100\" height=\"150\" fill=\"#3DC8D4\" stroke=\"#3DC8D4\"\nstroke\u00adwidth=\"10\" \/>\n<\/code><\/pre>\n<\/div>\n\n\n\n
    \n\n<\/rect>\n<\/svg>\n<\/div>\n<\/div>\n\n\n\n
    1. Circle<\/strong><\/li><\/ol>\n\n\n\n
      Etiqueta para crear un c\u00edrculo:<\/p>\n\n\n\n
      \n
      \n\n<\/circle>\n<\/svg>\n<\/div>\n\n\n\n
      \n
      <circle cx=\"150\" cy=\"100\" r=\"40\" fill=\"#16a085\" stroke=\"#bdc3c7\" stroke\u00adwidth=\"4\" \/><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
      1. Elipse<\/strong><\/li><\/ol>\n\n\n\n
        Etiqueta para hacer un c\u00edrculo:
        <\/p>\n\n\n\n
        \n
        \n
        <ellipse cx=\"100\" cy=\"100\" rx=\"80\" ry=\"100\" fill=\"#50EBCC\" stroke=\"#50EBCC\" stroke\u00adwidth=\"4\" \/><\/code><\/pre>\n<\/div>\n\n\n\n
        \n\n<\/ellipse>\n<\/svg>\n<\/div>\n<\/div>\n\n\n\n
        1. Polygon<\/strong><\/li><\/ol>\n\n\n\n
          Etiqueta para definir poligonos:<\/p>\n\n\n\n
          \n
          \n\n<\/polygon>\n<\/svg>\n<\/div>\n\n\n\n
          \n
          <polygon points=\"200,100 250,180 160,210\" fill=\"#847EF5\" stroke=\"#847EF5\" stroke\u00adwidth=\"4\" \/><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
          1. Line<\/strong><\/li><\/ol>\n\n\n\n
            Etiqueta para crear una l\u00ednea:<\/p>\n\n\n\n
            \n
            \n
            <line x1=\"50\" y1=\"50\" x2=\"150\" y2=\"50\" stroke=\"#bdc3c7\" stroke\u00adwidth=\"3\" \/><\/code><\/pre>\n<\/div>\n\n\n\n
            \n\n<\/line>\n<\/svg>\n<\/div>\n<\/div>\n\n\n\n
            1. Polyline<\/strong><\/li><\/ol>\n\n\n\n
              Etiqueta para definir una l\u00ednea discontinua:<\/p>\n\n\n\n
              \n
              \n\n<\/polyline>\n<\/svg>\n<\/div>\n\n\n\n
              \n
              <polyline points=\"0,40 40,40 40,80 80,80 80,120\" fill=\"none\" stroke=\"#bdc3c7\" stroke\u00adwidth=\"10\"\n\/><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
              Finalmente, solo quedar\u00e1 cerrar la etiqueta SVG:<\/p>\n\n\n\n
              <\/svg> <\/code><\/pre>\n\n\n\n
              \n
              \n
              Como hemos podido ver, crear un SVG puede ser muy sencillo, pero puede llegar a ser tan complejo como queramos. <\/p>\n\n\n\n
              En este ejemplo del ilustrador Chris Gennon<\/a> podemos ver un colibr\u00ed y unas flores muy detalladas animadas \u00fanicamente utilizando SVG y JS. \u00a1Y tan solo pesan 52Kb!<\/p>\n\n\n\n
              Como esta animaci\u00f3n, los SVG nos ofrecen un mundo lleno de posibilidades que poder implementar en nuestros sitios web. <\/p>\n<\/div>\n\n\n\n
              \n