Estilo SVG con CSS

También puede especificar reglas de estilo mediante propiedades CSS SVG, que comparten el mismo nombre que los atributos. Sin embargo, las propiedades CSS tienen prioridad sobre los atributos XML. Declarar un estilo con el mismo nombre que un atributo lo sobrescribirá. Si añade la siguiente declaración de estilo en el bloque <style> de su página, el ancho de todas las líneas cambiará a 20 píxeles:

line {
    stroke-width: 20px; /* Overrides attr */
}

SVG lines and stroke using CSS

También puedes aplicar los atributos CSS class y style a diferentes objetos SVG. Por ejemplo, considera las siguientes declaraciones de clase CSS:

.reds {
    fill: red;
}
.semitr {
    fill-opacity: 0.5;
}

Dado que los siguientes rectángulos pertenecen a una o más de estas clases, heredarán las propiedades de estilo declaradas para cada clase:

<svg width="600" height="200">
    <rect x="50" y="50" width="90" height="90" class="semitr"/>
    <rect x="200" y="50" width="175" height="100" rx="40" ry="40" class="reds semitr"/>
    <rect x="450" y="25" width="100" height="150" class="reds"/>
</svg>

Una clase aplica el relleno rojo, la otra aplica una transparencia del 50 %. El rectángulo central pertenece a ambas clases, por lo que es rojo y semitransparente, como se muestra a continuación:

SVG rect

El elemento <rect>, utilizado para crear los cuadrados y rectángulos mencionados anteriormente, requiere dos atributos: height y width, y se puede posicionar en la ventana gráfica con x e y. Se pueden aplicar esquinas redondeadas configurando las propiedades rx y ry (radio de la esquina).

Aunque HTML y SVG comparten muchas propiedades CSS, muchas, como fill o stroke, solo existen en SVG. En HTML se usarían background-color y color, que no funcionan en SVG. Al incrustarse en una página HTML, el elemento <svg> representa un contexto gráfico en el espacio de nombres HTML, por lo que para rellenarlo se necesita background-color. Sin embargo, cualquier elemento declarado dentro del elemento <svg>, como <rect>, forma parte del espacio de nombres SVG, donde la propiedad CSS background-color no existe, y se necesita fill.