Question

I’m trying to figure out how to make svgs without giving every element a style attribute.

Two problems:

When referencing an external css file, the style appears correctly in a browser, but not in an image viewer. Is this normal/avoidable?

Most of my elements have class and id attributes, and the following css doesnt provide the desired effect, i.e., county 21015 doesnt have its fill overridden

.county
{
font-size:12px;
fill:#d0d0d0;
fill-rule:nonzero;
stroke:#000000;
stroke-opacity:1;
stroke-width:0.1;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-linecap:butt;
marker-start:none;
stroke-linejoin:bevel;
}

path#21015
{
fill:red;
}

Answer 1

If the fill isn’t the one you want then there probably is something with higher specificity overriding the stylerule you want, such as an inline style attribute on that element, or some other rule affecting that element. You can also admit defeat by writing “fill: red !important” – that will work in the majority of cases.

Anyway, this is more of a css question than an svg question.