Spanish (Español) translation by Carlos (you can also view the original English article)
Las imágenes de mapa de bits como JPEG, GIF y PNG se ven terribles cuando las escalas, así que si deseas mantener la calidad en dimensiones grandes tienes que aumentar el tamaño del archivo. No obstante, las imágenes SVG (que significa Scalable Vector Graphics o Gráficos vectoriales escalables, en español) se ven exactamente iguales, sin importar las dimensiones a las que se escalen y mantienen el mismo tamaño de archivo.
Veamos los SVGs para el diseño web, ¡en sesenta segundos!
Entendiendo el formato SVG para el diseño web
Los SVGs se pueden utilizar mediante CSS como fondos, o se pueden colocar en el contenido como imágenes regulares. Puedes crear íconos y logotipos que siempre se vean perfectos en cualquier tamaño, se pueden animar y modificar, y puedes aplicarles filtros y efectos fantásticos (a continuación revisa la demostración de filtros SVG de Lucas Bebber). Incluso puedes controlar su coloración con CSS.
En su interior, un archivo SVG es simplemente un código XML editable y legible. Y el texto dentro del SVG es un texto normal, indexable y compatible con los motores de búsqueda.
Puedes crear SVGs con prácticamente cualquier programa de edición de gráficos vectoriales, como Affinity Designer, Boxy SVG, Illustrator, Gravit Designer o Inkscape. Simplemente crea tu imagen, expórtala como SVG, y está lista para ser utilizada en tus sitios web. Eso es SVG para el diseño web, ¡en sesenta segundos!
Más recursos útiles para SVG
By
