SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento SVG <symbol> se usa para definir objetos de plantilla gráfica que pueden ser instanciados por el elemento <use>. El uso de elementos de símbolo para gráficos que se usan varias veces en el mismo documento agrega estructura y semántica.
Sintaxis:
<symbol attribute="" >
content Here
</symbol>
Atributo:
- x: el eje x coordina el posicionamiento de la imagen.
- y: el eje y coordina el posicionamiento de la imagen.
- ancho: Ancho de la imagen.
- altura: Altura de la imagen.
- viewBox: Límite del elemento SVG.
- Atributos globales: algunos atributos globales utilizados como atributos principales y atributos de estilo, etc.
Ejemplo 1:
<!DOCTYPE html> <html> <body> <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"> <symbol id="circ" width="10" height="10" viewBox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <use xlink:href="#circ" x="5" y="5"/> </svg> </body> </html>
Salida: un símbolo de punto.
Ejemplo 2:
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"> <symbol id="circ" width="10" height="10" viewBox="0 0 2 2"> <rect height="10" width="10" /> </symbol> <use xlink:href="#circ" x="5" y="5" opacity="0.5" fill="green"/> </svg> </body> </html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Cromo
- Borde
- Firefox
- Safari
- explorador de Internet
- Ópera