SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento SVG <style> permite que las hojas de estilo se incrusten directamente en el contenido SVG.
Sintaxis:
<style>
Styling Content
</style>
Atributo:
- type: Tipo de hoja de estilo a utilizar.
- medios: este atributo define a qué medios se aplica el estilo.
- título: este atributo es el título de la hoja de estilo que se puede usar para cambiar entre hojas de estilo alternativas.
- Atributos globales: algunos atributos globales utilizados como atributos principales y atributos de estilo, etc.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<style>
circle {
fill: green;
}
</style>
<circle cx="5" cy="5" r="4" />
</svg>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<style>
rect {
fill: green;
stroke: black;
stroke-width: .1px;
}
</style>
<rect height="5" width='5'/>
</svg>
</body>
</html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Chrome 1 y superior
- Borde 12 y superior
- Firefox 1.5 y superior
- Safari 3.1 y superior
- Internet Explorer 9 y superior
- Ópera 9 y superior