SVG in CSS backgrounds
Method of using SVG images as CSS backgrounds


Spec
https://www.w3.org/TR/css3-background/#background-image


Status
W3C Candidate Recommendation




IE
Edge
Firefox
Chrome
Safari
Opera


 
 
 
110 
 
 


 
 
108 
109 
TP 
 


 
 
107 
108 
16.2 
 


11 
107 
106 
107 
16.1 
91 


10 
106 
105 
106 
16.0 
90 


9 
105 
104 
105 
15.6 
89 


8 
104 
103 
104 
15.5 
88 



Show all



7 
103 
102 
103 
15.4 
87 


6 
102 
101 
102 
15.2-15.3 
86 


5.5 
101 
100 
101 
15.1 
85 


 
100 
99 
100 
15 
84 


 
99 
98 
99 
14.1 
83 


 
98 
97 
98 
14 
82 


 
97 
96 
97 
13.1 
81 


 
96 
95 
96 
13 
80 


 
95 
94 
95 
12.1 
79 


 
94 
93 
94 
12 
78 


 
93 
92 
93 
11.1 
77 


 
92 
91 
92 
11 
76 


 
91 
90 
91 
10.1 
75 


 
90 
89 
90 
10 
74 


 
89 
88 
89 
9.1 
73 


 
88 
87 
88 
9 
72 


 
87 
86 
87 
8 
71 


 
86 
85 
86 
7.1 
70 


 
85 
84 
85 
7 
69 


 
84 
83 
84 
6.1 
68 


 
83 
82 
83 
6 
67 


 
81 
81 
81 
5.1 
66 


 
80 
80 
80 
5 
65 


 
79 
79 
79 
4 (1)
64 


 
18 
78 
78 
3.2 (1)
63 


 
17 
77 
77 
3.1 
62 


 
16 
76 
76 
 
60 


 
15 (3)
75 
75 
 
58 


 
14 (3)
74 
74 
 
57 


 
13 (3)
73 
73 
 
56 


 
12 (3)
72 
72 
 
55 


 
 
71 
71 
 
54 


 
 
70 
70 
 
53 


 
 
69 
69 
 
52 


 
 
68 
68 
 
51 


 
 
67 
67 
 
50 


 
 
66 
66 
 
49 


 
 
65 
65 
 
48 


 
 
64 
64 
 
47 


 
 
63 
63 
 
46 


 
 
62 
62 
 
45 


 
 
61 
61 
 
44 


 
 
60 
60 
 
43 


 
 
59 
59 
 
42 


 
 
58 
58 
 
41 


 
 
57 
57 
 
40 


 
 
56 
56 
 
39 


 
 
55 
55 
 
38 


 
 
54 
54 
 
37 


 
 
53 
53 
 
36 


 
 
52 
52 
 
35 


 
 
51 
51 
 
34 


 
 
50 
50 
 
33 


 
 
49 
49 
 
32 


 
 
48 
48 
 
31 


 
 
47 
47 
 
30 


 
 
46 
46 
 
29 


 
 
45 
45 
 
28 


 
 
44 
44 
 
27 


 
 
43 
43 
 
26 


 
 
42 
42 
 
25 


 
 
41 
41 
 
24 


 
 
40 
40 
 
23 


 
 
39 
39 
 
22 


 
 
38 
38 
 
21 


 
 
37 
37 
 
20 


 
 
36 
36 
 
19 


 
 
35 
35 
 
18 


 
 
34 
34 
 
17 


 
 
33 
33 
 
16 


 
 
32 
32 
 
15 


 
 
31 
31 
 
12.1 


 
 
30 
30 
 
12 


 
 
29 
29 
 
11.6 


 
 
28 
28 
 
11.5 


 
 
27 
27 
 
11.1 


 
 
26 
26 
 
11 


 
 
25 
25 
 
10.6 


 
 
24 
24 
 
10.5 


 
 
23 (2)
23 
 
10.0-10.1 


 
 
22 (2)
22 
 
9.5-9.6 


 
 
21 (2)
21 
 
9 


 
 
20 (2)
20 
 
 


 
 
19 (2)
19 
 
 


 
 
18 (2)
18 
 
 


 
 
17 (2)
17 
 
 


 
 
16 (2)
16 
 
 


 
 
15 (2)
15 
 
 


 
 
14 (2)
14 
 
 


 
 
13 (2)
13 
 
 


 
 
12 (2)
12 
 
 


 
 
11 (2)
11 
 
 


 
 
10 (2)
10 
 
 


 
 
9 (2)
9 
 
 


 
 
8 (2)
8 
 
 


 
 
7 (2)
7 
 
 


 
 
6 (2)
6 
 
 


 
 
5 (2)
5 
 
 


 
 
4 (2)
4 
 
 


 
 
3.6 
 
 
 


 
 
3.5 
 
 
 


 
 
3 
 
 
 


 
 
2 
 
 
 




Safari on iOS
Opera Mini
Android Browser
Blackberry Browser
Opera Mobile
Android Chrome
Android Firefox
IE Mobile
Android UC Browser
Samsung Internet
QQ Browser
Baidu Browser
KaiOS Browser


16.1 
all (2)
107 
10 
64 
107 
106 
11 
13.4 
18.0 
13.1 
13.18 
2.5 


16.0 
 
4.4.3-4.4.4 
7 
12.1 (2)
 
 
10 
 
17.0 
 
 
 


15.6 
 
4.4 
 
12 (2)
 
 
 
 
16.0 
 
 
 


15.5 
 
4.2-4.3 
 
11.5 (2)
 
 
 
 
15.0 
 
 
 



Show all



15.4 
 
4.1 
 
11.1 (2)
 
 
 
 
14.0 
 
 
 


15.2-15.3 
 
4 
 
11 (2)
 
 
 
 
13.0 
 
 
 


15.0-15.1 
 
3 
 
10 (2)
 
 
 
 
12.0 
 
 
 


14.5-14.8 
 
2.3 
 
 
 
 
 
 
11.1-11.2 
 
 
 


14.0-14.4 
 
2.2 
 
 
 
 
 
 
10.1 
 
 
 


13.4-13.7 
 
2.1 
 
 
 
 
 
 
9.2 
 
 
 


13.3 
 
 
 
 
 
 
 
 
8.2 
 
 
 


13.2 
 
 
 
 
 
 
 
 
7.2-7.4 
 
 
 


13.0-13.1 
 
 
 
 
 
 
 
 
6.2-6.4 
 
 
 


12.2-12.5 
 
 
 
 
 
 
 
 
5.0-5.4 
 
 
 


12.0-12.1 
 
 
 
 
 
 
 
 
4 
 
 
 


11.3-11.4 
 
 
 
 
 
 
 
 
 
 
 
 


11.0-11.2 
 
 
 
 
 
 
 
 
 
 
 
 


10.3 
 
 
 
 
 
 
 
 
 
 
 
 


10.0-10.2 
 
 
 
 
 
 
 
 
 
 
 
 


9.3 
 
 
 
 
 
 
 
 
 
 
 
 


9.0-9.2 
 
 
 
 
 
 
 
 
 
 
 
 


8.1-8.4 
 
 
 
 
 
 
 
 
 
 
 
 


8 
 
 
 
 
 
 
 
 
 
 
 
 


7.0-7.1 
 
 
 
 
 
 
 
 
 
 
 
 


6.0-6.1 
 
 
 
 
 
 
 
 
 
 
 
 


5.0-5.1 
 
 
 
 
 
 
 
 
 
 
 
 


4.2-4.3 
 
 
 
 
 
 
 
 
 
 
 
 


4.0-4.1 (1)
 
 
 
 
 
 
 
 
 
 
 
 


3.2 (1)
 
 
 
 
 
 
 
 
 
 
 
 


Notes

Partial support in iOS Safari and older Safari versions refers to failing to support tiling or the background-position property.
Partial support in older Firefox and Opera Mini/Mobile refers to SVG images being blurry when scaled.
Partial support in Edge 15 and older refers to a lack of support for SVG data URIs. see bug

Bugs

Opera messes background repeat when changing zoom level: known issue in Opera's private bug tracker (CORE-33071)
IE 10 Mobile does not always provide crisp SVG backgrounds, particularly when zooming in.
Android 2.x will not display the fallback background-image in addition to not displaying the SVG if it is implemented using multiple background-image properties on the same element. (e.g. PNG background-image fallback + SVG background-image)

Resources

Tutorial for advanced effects



Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/svg-css

{'path': 'public/docs/browser_support_tables/svg-css.html', 'source': 'DevDocs.IO'}