background url ss svg

Solutions on MaxInterview for background url ss svg by the best coders in the world

Search
showing results for - "background url ss svg"
Lolita
29 Aug 2020
1/* if you have file image svg like below */
2<svg>
3  <circle r="50" cx="50" cy="50" fill="tomato"/>
4  <circle r="41" cx="47" cy="50" fill="orange"/>
5  <circle r="33" cx="48" cy="53" fill="gold"/>
6  <circle r="25" cx="49" cy="51" fill="yellowgreen"/>
7  <circle r="17" cx="52" cy="50" fill="lightseagreen"/>
8  <circle r="9" cx="55" cy="48" fill="teal"/>
9</svg>
10
11/* you must encode first like this
12%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E
13can use tool https://yoksel.github.io/url-encoder/
14*/
15
16/* finally you can use in css as background */
17background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E");
source
similar questions
how to change svg image color on hover using csscontent url svg csssvg as background csscircle background image csscss svg width 100 25svg background cssbackground image url 28 background png 29svg stroke colorbackground image pathbackground path csscss for svgchange d in path svg cssset svg background color css
queries leading to this page
css background image svg urlsvg rect background urlinline background svg inside of urlset background svg scssbackgtound image url with svg tagbackground url ss svgcss background image svg url repeatingsvg background urkbackground url a svg id in cssput svg in background image urlsvg background opacitybackground url ss svg