¿Qué es y qué ventajas tiene el formato SVG?
  • Nosotros
  • Contacto
Advertisement
  • Login
  • Regístrate
Mi plan
Gràffica
  • Ilustración
  • Tipografía
  • Branding
  • Packaging
  • Opinión
  • GRÀFFICA+
  • TIENDA
    • Comprar
    • Revista
    • Puntos de venta
    • Suscripciones

No hay productos en el carrito.

Sin resultado
Ver todos los resultados
Gràffica
  • Ilustración
  • Tipografía
  • Branding
  • Packaging
  • Opinión
  • GRÀFFICA+
  • TIENDA
    • Comprar
    • Revista
    • Puntos de venta
    • Suscripciones

No hay productos en el carrito.

Sin resultado
Ver todos los resultados
Gràffica
Sin resultado
Ver todos los resultados

¿Qué es y qué ventajas tiene el formato SVG?

Por Gràffica
29/09/2014
en Utilidades
0
3.4k
REDES
83.3k
LECTURAS

SVG (Scalable Vector Graphics) es un formato vectorial poco conocido pero muy útil para su uso online por su flexibilidad y por la capacidad de ofrecer gráficos con calidad.

SVG - iconEl formato SVG es para muchos un total desconocido. Cuando queremos colocar algún gráfico en la web, en la mayoría de ocasiones optamos por JPG. En caso de necesitar transparencia o animación optamos por un PNG o GIF. Lo que muchos no saben es que se pueden usar archivos vectoriales para su uso en navegadores.

Vectorial

El SVG es vectorial, lo que supone tener todas las ventajas de cualquier formato vectorial. Es escalable, pesa poco y permite una definición mayor a tamaños reducidos, mucho mayor que los archivos bitmap. El formato es igual al que se utiliza con cualquier programa vectorial como Corel Draw o Adobe Illustrator.

Standard abierto y compatible

Así como el formato Flash, que también era vectorial, propiedad de Macromedia, es decir de Adobe, el formato SVG es un formato abierto, estándar y basado en XML. Aunque las primeras versiones no se podían ver en los diferentes navegadores, hoy ya es un estándar que funciona sin problemas en todos los navegadores. SVG se convirtió en una recomendación del W3C en septiembre de 2001 con lo que en estos momentos ya es admitido por todos. A ser un formato basado en XML necesitamos cierto control de código para hacer que un archivo SVG funcione adecuadamente.

Tipografías

El formato SVG nos permite por un lado utilizar las tipografías con trazados pero también nos permite incluirlas dentro del propio archivo en formato TrueType y Tipo 1, lo que nos da una capacidad extraordinaria en cuanto a que los motores de búsqueda son capaces de indexarlo. Hay que tener en cuenta que para el texto puro colocado como tipografía tiene que ser o bien de las fuentes instaladas en el sistema o bien incluidas como estilo CSS.

Proyectos como Iconic también usan el formato SVG para hacer que una tipografía con iconos nos sirva para los diferentes usos y necesidades de tamaño y variación en función de las acciones que deseemos. Puedes ver ejemplos en su web con los que se entenderás realmente y en profundidad el verdadero uso del formato SVG.

SVG

INTERACTIVO
Los archivos SVG pesan poco, igual que lo haría un archivo vectorial. Soportan estilos CSS, con lo que si cambiamos el estilo en nuestra web también cambiará dentro del archivo. Este tipo de archivos puede incluir scripts que permiten caminos dinámicos. Puede admitir acciones como los rollovers o cambios al hacer click. Puedes ver un ejemplo en este enlace: http://codepen.io/chriscoyier/pen/evcBu

ICONOS RESPONSIVE
En la actualidad todas las webs están migrando al formato responsive, así que nos encontramos multitud de iconos que se redimensionan en función del ancho de la pantalla. Normalmente el funcionamiento suele ser sustituir un icono bitmap por otro más pequeño. Con SVG podemos utilizar el mismo y que se vaya reduciendo poco a poco, o bien que utilizar varios tamaños pero que todos ellos sean SVG con la ventaja de la mejor visualización al ser vectorial.

SVG

Compartir1359Tweet833Enviar

+ Artículos

Arte

Las 15 corrientes artísticas que un diseñador debería conocer

Por Jorge Gil
Utilidades

Canon ImagePrograf Pro-300, ultracalidad a precio asequible

Por Víctor Palau
Tipografía

Cómo cambiar la tipografía de tu biografía de Instagram

Por Gràffica
Utilidades

¿Teletrabajas? Muy atento a estos consejos

Por Gràffica
Fotografía

Sony Alpha 1, el nuevo buque insignia de la empresa japonesa

Por Gràffica
Utilidades

10 apps imprescindibles para todo diseñador gráfico

Por Sara Fernandez
Siguiente

La Asociación Galega de Deseñadores se posiciona contra los concursos de diseño

Comentarios 23

  1. dexter_one says:
    Hace 1 año

    Explicado de manera muy concisa, me ayudaste para aprender algo nuevo :)

    Responder
  2. Leonardo Esteban Montes says:
    Hace 3 años

    Muchas gracias.

    Responder
  3. Vico Candellero says:
    Hace 3 años

    Siempre se aprende algo nuevo, gracias por explicarlo tan simple!

    Responder
  4. Eduardo Sánchez de la Chica says:
    Hace 4 años

    Muy bien expuesto y resumido, mil gracias!

    Responder
  5. Manu. says:
    Hace 4 años

    …De gran ayuda,gracias.

    Responder
  6. Bta RxMx says:
    Hace 4 años

    Justo lo que buscaba antes de comenzar a trabajar con una Web responsiva, me librara de preparar varios .PGN sin perder calidad y ahorrando mucho tiempo. ¡Saludos!

    Responder
  7. Diego says:
    Hace 5 años

    Gran post. Pena que no diga nada que .SVG es el formato nativo del software vectorial libre Inkscape, que cada vez usamos más gente.

    Responder
    • Cruz says:
      Hace 3 años

      Mil gracias, esa información es la que yo estaba buscando

      Responder
  8. renzo says:
    Hace 6 años

    Le veia muchas limitaciones al formato *.ico pero el svg al tener tantas opciones, lo hace complicado… Ahora mismo tengo una URL que supuestamente debe mostrar un SVG y no lo muestra… porque no se muestra este SVG ? F5 no sirve…

    Responder
  9. pedro says:
    Hace 6 años

    mmm, no me convence tu publicación.

    Responder
    • pedrito says:
      Hace 6 años

      Yo creo que esta muy claro. Trata de entenderlo mono pedro.

      Responder
  10. guli says:
    Hace 6 años

    Buena data, mastersss

    Responder
  11. Meri says:
    Hace 6 años

    Que interesante!

    Responder
  12. Santiago Espinosa says:
    Hace 6 años

    Ah, pues no, y tiene muy buena pinta… gracias!

    Responder
  13. go says:
    Hace 6 años

    Pues hasta ahora no conocía el formato, casi casi que me habéis salvado la vida.

    Responder
  14. Santiago Espinosa says:
    Hace 6 años

    Y también (y para mí es lo mejor) pueden modificarse mediante javascript y hacer cosas maravillosas. D3js es un buen ejemplo de ello

    Responder
    • Marcelo López Santa says:
      Hace 6 años

      Si, yo también diría que es una de sus grandísimas ventajas. No sé si conoces http://snapsvg.io/ pero si no, échale un ojo que creo que te gustará ;)

      Responder
  15. wilson says:
    Hace 6 años

    Que diferencia hay en usar icon fonts y los svg.

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable El titular del sitio.
  • Finalidad  Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios  .
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Arte

La exposición inmersiva de Gustav Klimt en Barcelona

Por Carmen Martínez

La ambiciosa experiencia inmersiva centrada en el recorrido artístico de Gustav Klimt llega a Barcelona a partir del 16 de...

Leer

Descubre cuáles son tus fortalezas y debilidades como profesional del diseño con esta herramienta

McDonald’s se suma al packaging minimalista con este nuevo rediseño vectorial

¿Qué es el blanding? La nueva tendencia en el diseño de marca

Las 15 corrientes artísticas que un diseñador debería conocer

  • Ilustración
  • Tipografía
  • Branding
  • Packaging
  • Opinión
  • GRÀFFICA+
  • TIENDA
Nota Legal | Condiciones generales

© 2019 Gràffica.info

Aviso legal - Política de privacidad y Cookies

Sin resultado
Ver todos los resultados
  • Ilustración
  • Tipografía
  • Branding
  • Packaging
  • Opinión
  • GRÀFFICA+
  • TIENDA
    • Comprar
    • Revista
    • Puntos de venta
    • Suscripciones
  • Login
  • Únete
  • Carrito

© 2019 Gràffica.info

Aviso legal - Política de privacidad y Cookies

¡Hola de nuevo!

Entra en tu cuenta abajo

¿Has olvidado tu contraseña? Únete

¡Crea una nueva cuenta!

Rellena el formulario de abajo para registrarte

Se requieren todos los campos Entrar

Recupera tu contraseña

Por favor, pon tu usuario o email para restablecer tu contraseña

Entrar
Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver Política de cookies
Privacidad