Beneficios
- Tamaño de archivo muy pequeño y comprimido
- La image se puede ver perfectamente en cualquier resolución de pantalla ya que puede ser escalado sin problemas, pudiendo verse perfecto en resoluciones retina display.
- Tamaño del archivo reducido.
Normalmente ese tipo de archivos son creados con alguna herramienta de dibujos vectoriales como Adobe Illustrador. Ahora mismo existen muchos editores online de SVG donde puedes crearlos y editarlos.
Independientemente de la herramientas uses, tu puedes usar un SVG de 2 maneras:
- Con un archivo físico con la extensión .svg
- O con el codigo SVG que es similar a este:
Con cualquiera de los 2 puedes trabajar. Para usar el SVG solo tienes que usar la etiqueta img como con cualquier imagen normal y con CSS puedes controlar el tamaño. Ejemplo:
Tambien puedes usar un SVG como fondo de un elemento con CSS.
.container {
width: 100px;
height: 82px;
background: url(yourFile.svg);
}
También otra opciones es usar la etiqueta “object”. Ejemplo:
<object type="image/svg+xml" data="namefile.svg">Your browser does not support SVGs</object>
Usando el código SVG
Descarga el Siguiente archivo:
Después abre el archivo con tu editor de texto, por ejemplo yo estoy usando sublime text, cuando abras el archivo verás el código SVG que crea la imagen. Este código lo puedes copiar y pegar directamente en un archivo HTML y verás como el SVG aparece, El navegador lo cargara automáticamente.
Los archivos SVG pueden ser optimizados ya que como puedes ver en el código del archivo del “Che.svg” hay muchas etiquetas adicionales. Puedes usar la siguiente herramienta para esto.
También puedes dar estilo individualmente a cada elemento del SVG, tan solo tienes que asignar clases para poder dar tus estilos. Ten en cuenta que para dar estilo a los SVG tienes que usar propiedades CSS especiales para ellos, los cuales tienes que buscar en google por ejemplo.
Si quieres conocer un poco más en detalle cada elemento dentro del SVG tag , te sugiero que visites este link:
Adicionalmente esta tabla te ayudará a entender lo que puedes hacer con los SVG dependiendo la manera en como lo insertes en tu página web.
Lo que puedes hacer
|
Object
|
Inline
|
Img
|
Background-image
|
CSS Manipulation
|
Yes
|
Yes
|
Some inline
|
Some inline
|
JS Manipulation
|
Yes
|
Yes
|
No
|
No
|
SVG Animation
|
Yes
|
Yes
|
Yes
|
Yes
|
Interactive SVG Animation
|
Yes
|
Yes
|
No
|
No
|
Usando Javascript con SVG
También podemos manipular los SVG con javascript como lo haríamos con un objeto normal HTML, podemos usar javascript puro o jquery para esto. En el siguiente ejemplo que encontre internet puedes ver cómo se selecciona el elemento y después se cambia su propiedad “fill”.
Si quieres una manipulación más avanzada con los SVG te recomienzo las siguientes librarias:
Habiendo escrito todo lo anterior, Deberías de ir considerando de usar svg en todos tus iconos y logos de tus proyectos web. Si por alguna razon aun no estas convencido visita este link :
http://talks.brennaobrien.com/svg/#/
http://talks.brennaobrien.com/svg/#/
links
