<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
➥ xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
➥ viewBox="-20 -20 250 250" xml:space="preserve">
<defs>
<style type="text/css">
<![CDATA[
circle {
stroke: #000;
stroke-width: 30;
fill: #009688;
}
@media (width: 100px) {
circle {
fill: #673ab7;
}
}
@media (width: 300px) {
circle {
fill: #ffc107;
}
}
]]>
</style>
</defs>
<circle cx="100" cy="100" r="100" />
<circle cx="100" cy="100" r="50" />
</svg>Thisisasimplecase.Ourcircleelementswillgetanewfillcoloratspecific
viewportwidths.Whentheviewportis 20 pixelswide,thefillwillbeyellow.When
it's 300 pixelswide,itwillbepurple.Tomakethiswork,wehavetouseourSVGimageasabackgroundimageandset
theselector'sbackground-sizeproperty.Inthiscase,we'lluseourimageasa
backgroundforthebodyelementandforlielements.Figure8.12showstheresults:body, li {
background: url(../images/circles.svg);
}body {
background-color: #9c27b0;326 CSS Master