Для разнообразия
Указание фрагмента SVG#ID работает везде при использовании в объектах с генерируемым контентом (img, embed, object).
Но указание фрагмента в
url() для фона работает только в
IE,
FF). Про
webkit сказано:
«Currently does not work for CSS background images in Chrome and Safari»SVG (допустим, имя будет
image.svg)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<view id="rect" viewBox="0 0 100 100"/>
<rect fill="#69c" x="20" y="20" width="60" height="60"/>
<view id="circle" viewBox="100 0 100 100"/>
<circle fill="#f90" cx="150" cy="50" r="30"/>
<view id="polygon" viewBox="200 0 100 100"/>
<polygon fill="#3c6" points="220,80 280,80 250,20 220,80"/>
</svg>
CSSdiv {
display: inline-block;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-color: #f0f0f0;
background-position: 50% 50%;
}
.a1 {
background-image: url(image.svg#rect);
}
.a2 {
background-image: url(image.svg#circle);
}
.a3 {
background-image: url(image.svg#polygon);
}
HTML<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
Если использовать картинки, то работает везде:
<img class="img" src="image.svg#rect">
<img class="img" src="image.svg#circle">
<img class="img" src="image.svg#polygon">
