SVG Tutorial
Empezando con SVG
Buscar..
Observaciones
Gráficos vectoriales escalables (SVG) es un estándar W3C para dibujar imágenes vectoriales.
Aquí hay un simple archivo SVG independiente:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" fill="blue"/>
</svg>
SVG también se puede incrustar en HTML, en cuyo caso el atributo xmlns no es obligatorio.
Otros elementos gráficos son:
-
<line> -
<ellipse> -
<path> -
<polygon>y<polyline> -
<text>incluyendo elementos secundarios como<tspan>y<textPath>
CSS se usa para el estilo, aunque no todas las propiedades de CSS se aplican a SVG y SVG define algunas propiedades específicas, como el fill y el stroke que no se usan en otros lugares.
Las formas se pueden rellenar con degradados o patrones y se pueden lograr efectos de trama adicionales mediante el uso de filtros.
El recorte está disponible utilizando los elementos gráficos anteriores como rutas de recorte.
Respecto a las versiones del estándar W3C SVG:
- La versión actual es SVG 1.1 (Segunda Edición)
- El W3C está trabajando actualmente en un borrador de SVG 2
Versiones
| Versión | Fecha de lanzamiento |
|---|---|
| 1.0 | 2001-09-04 |
| 1.1 Primera edición | 2003-01-14 |
| 1.2 Diminuto | 2008-12-22 |
| 1.1 Segunda edición | 2011-08-16 |
SVG en línea
Inline SVG permite el marcado SVG, escrito dentro de HTML, para generar gráficos en el navegador.
Cuando se usa SVG en línea, no se requiere estrictamente un DOCTYPE. En lugar de eso, solo será suficiente con <svg> abrir y cerrar etiquetas junto con los atributos viewBox o width y height:
<svg width="100%" height="100%">
<!-- SVG elements go here -->
</svg>
El fragmento <svg> anterior actúa como un contenedor y como un elemento estructural. Este fragmento establece su propio sistema de coordenadas.
A continuación se muestra un ejemplo de representación de un fragmento SVG con algo de contenido. Producirá un rectángulo con "¡Hola mundo!" texto dentro de ella
<svg width="50%" viewBox="0 0 10 10">
<rect x="1" y="1" width="5" height="3" fill="teal" />
<text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
Resultado:
SVG como un ![]()
Puede representar el contenido de un archivo SVG como una imagen dentro de un documento HTML utilizando una etiqueta <img> . Por ejemplo:
<img src="my_svg_file.svg" alt="Image description">
Las dimensiones de la imagen, de manera predeterminada, se mostrarán de acuerdo con las propiedades de ancho y alto especificadas en el archivo SVG al que se hace referencia en el atributo src .
Vale la pena señalar varias limitaciones inherentes a este enfoque:
- La compatibilidad del navegador, aunque es buena, no incluye Internet Explorer 8 y versiones anteriores, ni Android 2.3 y versiones anteriores.
- No puede aplicar estilo a los elementos individuales contenidos en el archivo SVG utilizando CSS, que es externo al archivo SVG. Todo el CSS debe estar dentro del propio archivo de imagen.
- JavaScript no se ejecutará.
- La imagen debe estar completa en un solo archivo. Por ejemplo, si el archivo SVG contiene imágenes de trama, esas imágenes internas deben codificarse como URL de datos.
SVG como imagen de fondo
Puede mostrar un archivo SVG dentro de un documento HTML, especificándolo como una imagen de fondo en CSS. Por ejemplo:
.element {
background-size: 100px 100px;
background: url(my_svg_file.svg);
height: 100px;
width: 100px;
}
Si las dimensiones especificadas en su archivo SVG son mayores que las dimensiones de su elemento HTML, puede ser conveniente especificar la propiedad de background-size para escalar el SVG para que se ajuste a su elemento.
Al igual que con el uso de SVG como <img> , vale la pena señalar algunas limitaciones con este enfoque:
- La compatibilidad del navegador no incluye Internet Explorer 8 y versiones anteriores, ni Android 2.3 y versiones anteriores.
- No puede aplicar estilo a los elementos individuales contenidos en el archivo SVG utilizando CSS, que es externo al archivo SVG. Todo el CSS debe estar dentro del propio archivo de imagen.