• Nosotros
  • Contacto
Öbjetto
Mússica
Advertisement
  • Login
  • Regístrate
Mi plan
Gràffica
  • Ilustración
  • Tipografía
  • Branding
  • Packaging
  • Opinión
  • Gràffica+
  • Tienda

    Visitar tienda →

    Suscripciones

    Puntos de venta

    • Libros esenciales

      Libros esenciales (75)

    • Revista Gràffica

      Revista Gràffica (24)

    • Papelería

      Papelería (13)

    • Gadgets

      Gadgets

  • × Calendario Emocional 1 × 0,00€

Subtotal: 0,00€

Ver carritoFinalizar compra

Sin resultado
Ver todos los resultados
Gràffica
  • Ilustración
  • Tipografía
  • Branding
  • Packaging
  • Opinión
  • Gràffica+
  • Tienda

    Visitar tienda →

    Suscripciones

    Puntos de venta

    • Libros esenciales

      Libros esenciales (75)

    • Revista Gràffica

      Revista Gràffica (24)

    • Papelería

      Papelería (13)

    • Gadgets

      Gadgets

  • × Calendario Emocional 1 × 0,00€

Subtotal: 0,00€

Ver carritoFinalizar compra

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
30/08/2021
en Utilidades

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 - icon

El 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.

Diseño gráfico en Perú: ¿Cuánto es el sueldo promedio?

10 gadgets de verano para diseñadores

10 gadgets de verano para diseñadores

Encuentra el copy perfecto con esta web gratuita

5 consejos para diseñar humanos digitales

El formato SVG es un formato vectorial abierto, estándar y basado en XML por lo que todo funciona en todos los navegadores y está aceptado por todos.

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
Compartir2047Tweet1263Enviar

+ Artículos

Utilidades

Diseño gráfico en Perú: ¿Cuánto es el sueldo promedio?

Por Gràffica
10 gadgets de verano para diseñadores
Tecnología

10 gadgets de verano para diseñadores

Por Gràffica
Utilidades

Encuentra el copy perfecto con esta web gratuita

Por Gràffica
Animación

5 consejos para diseñar humanos digitales

Por Marlon Nuñez
Fotografía

7 consejos para sacar todo el partido a la fotografía móvil

Por Gràffica
Utilidades

Las mejores ofertas para creativos en el Amazon Prime Day 2022

Por Gràffica

Comentarios 24

  1. Espe says:
    Hace 4 meses

    ¡Muy buen post! Si uso Procreate para mis ilustraciones, ¿cómo puedo guardarlas en formato SVG?

    Responder
  2. Diseño Gráfico Digital says:
    Hace 12 meses

    Efectivamente, la gran ventaja de los formatos vectoriales es su escalabilidad, conocer el formato SVG y saber optimizar los archivos SVG generados desde software de diseño vectorial es imprescindible para realizar proyectos de diseño gráfico para entornos digitales y sitios web responsive. Así lo explicamos también en el libro Diseño Gráfico Digital .

    Responder
  3. Agenciate says:
    Hace 1 año

    Muy buen post. Es un formato un poco olvidado, pero funciona muy bien para iconos por ejemplo. Todos los que hacen diseño gráfico seguramente conocen las ventajas del svg. Para usuarios que no tienen tanta experiencia con el diseño gráfico y uso de vectores les sonará más formato png, que es lo primero que se suele usar para conseguir imágenes con fondo transparente.

    Responder
  4. Laura says:
    Hace 1 año

    Muy interesante. Sabía que era un formato de salida para guardar diagramas de flujo online pero no sabía todas las cualidades que había detrás del formato. Jugaré con él a ver si hago mis webs un poco mas responsive.

    Responder
  5. dexter_one says:
    Hace 2 años

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

    Responder
  6. Leonardo Esteban Montes says:
    Hace 5 años

    Muchas gracias.

    Responder
  7. Vico Candellero says:
    Hace 5 años

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

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

    Muy bien expuesto y resumido, mil gracias!

    Responder
  9. Manu. says:
    Hace 6 años

    …De gran ayuda,gracias.

    Responder
  10. Bta RxMx says:
    Hace 6 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
  11. Diego says:
    Hace 6 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 5 años

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

      Responder
  12. renzo says:
    Hace 7 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
  13. pedro says:
    Hace 8 años

    mmm, no me convence tu publicación.

    Responder
    • pedrito says:
      Hace 8 años

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

      Responder
  14. guli says:
    Hace 8 años

    Buena data, mastersss

    Responder
  15. Meri says:
    Hace 8 años

    Que interesante!

    Responder
  16. Santiago Espinosa says:
    Hace 8 años

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

    Responder
  17. go says:
    Hace 8 años

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

    Responder
  18. Santiago Espinosa says:
    Hace 8 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 8 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
  19. wilson says:
    Hace 8 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 *

10 gadgets de verano para diseñadores
Tecnología

10 gadgets de verano para diseñadores

Por Gràffica

Playa, montaña, ciudad recóndita (o no tan recóndita), el verano es un tiempo perfecto para viajar, abandonar la rutina y...

Leer

Así es el logo de Pinterest

Nike cumple 50 años con animaciones made in Spain

Apple Car: La apuesta de Apple por la movilidad que va cogiendo forma

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

  • Ilustración
  • Tipografía
  • Branding
  • Packaging
  • Opinión
  • Gràffica+
  • Tienda
Condiciones Generales | Política de Privacidad | Entregas y devoluciones

© 2022 graffica.info

Sin resultado
Ver todos los resultados
  • Ilustración
  • Tipografía
  • Branding
  • Packaging
  • Opinión
  • Gràffica+
  • Tienda
  • Login
  • Únete
  • Carrito

© 2022 graffica.info

¡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
Gestionar el consentimiento de las cookies
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Ver preferencias
{title} {title} {title}