svg-css.json

{
  "title":"SVG in CSS backgrounds",
  "description":"Method of using SVG images as CSS backgrounds",
  "spec":"http://www.w3.org/TR/css3-background/#background-image",
  "status":"cr",
  "links":[
    {
      "url":"http://designfestival.com/a-farewell-to-css3-gradients/",
      "title":"Tutorial for advanced effects"
    }
  ],
  "bugs":[
    {
      "description":"SVG-as-image is <a href=\"https://bugzilla.mozilla.org/show_bug.cgi?id=600207\">fuzzy/pixelated</a> when zoomed or printed in all browsers but Chrome 23+ and IE9+."
    },
    {
      "description":"Opera messes background repeat when changing zoom level: <a href=\"http://stackoverflow.com/questions/15220910/svg-as-css-background-problems-with-zoom-level-in-opera#comment21458317_15220910\">known issue in Opera's private bug tracker (CORE-33071)</a>"
    }
  ],
  "categories":[
    "CSS3",
    "SVG"
  ],
  "stats":{
    "ie":{
      "5.5":"n",
      "6":"n",
      "7":"n",
      "8":"n",
      "9":"y",
      "10":"y",
      "11":"y"
    },
    "firefox":{
      "2":"n",
      "3":"n",
      "3.5":"n",
      "3.6":"n",
      "4":"a",
      "5":"a",
      "6":"a",
      "7":"a",
      "8":"a",
      "9":"a",
      "10":"a",
      "11":"a",
      "12":"a",
      "13":"a",
      "14":"a",
      "15":"a",
      "16":"a",
      "17":"a",
      "18":"a",
      "19":"a",
      "20":"a",
      "21":"a",
      "22":"a",
      "23":"a",
      "24":"y",
      "25":"y",
      "26":"y"
    },
    "chrome":{
      "4":"a",
      "5":"y",
      "6":"y",
      "7":"y",
      "8":"y",
      "9":"y",
      "10":"y",
      "11":"y",
      "12":"y",
      "13":"y",
      "14":"y",
      "15":"y",
      "16":"y",
      "17":"y",
      "18":"y",
      "19":"y",
      "20":"y",
      "21":"y",
      "22":"y",
      "23":"y",
      "24":"y",
      "25":"y",
      "26":"y",
      "27":"y",
      "28":"y",
      "29":"y",
      "30":"y",
      "31":"y"
    },
    "safari":{
      "3.1":"n",
      "3.2":"a",
      "4":"a",
      "5":"y",
      "5.1":"y",
      "6":"y",
      "7":"y"
    },
    "opera":{
      "9":"n",
      "9.5-9.6":"y",
      "10.0-10.1":"y",
      "10.5":"y",
      "10.6":"y",
      "11":"y",
      "11.1":"y",
      "11.5":"y",
      "11.6":"y",
      "12":"y",
      "12.1":"y",
      "15":"y",
      "16":"y",
      "17":"y"
    },
    "ios_saf":{
      "3.2":"a",
      "4.0-4.1":"a",
      "4.2-4.3":"y",
      "5.0-5.1":"y",
      "6.0-6.1":"y",
      "7.0":"y"
    },
    "op_mini":{
      "5.0-7.0":"y"
    },
    "android":{
      "2.1":"n",
      "2.2":"n",
      "2.3":"n",
      "3":"y",
      "4":"y",
      "4.1":"y",
      "4.2":"y"
    },
    "bb":{
      "7":"y",
      "10":"y"
    },
    "op_mob":{
      "10":"y",
      "11":"y",
      "11.1":"y",
      "11.5":"y",
      "12":"y",
      "12.1":"y",
      "14":"y"
    },
    "and_chr":{
      "0":"y"
    },
    "and_ff":{
      "0":"y"
    },
    "ie_mob":{
      "10":"y"
    }
  },
  "notes":"Partial support in Firefox refers to a known bug where SVG images are blurry when scaled, fixed in Firefox 24. Partial support in iOS Safari and older Safari versions refers to failing to support tiling or the background-position property.",
  "usage_perc_y":68.86,
  "usage_perc_a":15.19,
  "ucprefix":false,
  "parent":"",
  "keywords":"svg-in-css,svgincss,css-svg",
  "shown":true
}