hi everyone. i just finished my portfolio and i was completely happy with it. until i figured out that the backgrounds i used for different divs don’t show when i check my portfolio on my phone or another PC but in my own laptop they show with no problem. i used SVG files as background and i guess the problem is with uploading the SVG files. i tried many site to upload them but none of them seem to work. right now I’m using png instead but for some reason like scaling issue I’m not happy with it. so can somebody help me through this and show me how to use those SVGs as background?
BTW English isn’t my first language so kindly ignore my mistakes 
I haven’t yet encountered such a problem, but if I am not wrong, there may be some issues among browsers – basically, not all browsers necessarily support SVG files. If your images are shown on one of your computers, but aren’t shown on other devices, the issue may be your browsers. Try downloading Chrome. I bet this’ll solve your problem.
1 Like
@N4thyra is most likely right on this one… they don’t show because of the browsers on your phone and other computer.
The other issue might be in how you linked them. You might try embedding inline svg instead (which can be done in HTML or as a background-image).
Something like this (which is just a plain circle) should get the job done:
background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220,%200,%20100,%20100%22%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22/%3E%0A%3C/svg%3E');
Notice that you have to URL encode the “special characters”, but scripts can save you here.
https://www.youtube.com/watch?v=af4ZQJ14yu8
https://css-tricks.com/lodge/svg/07-using-svg-inline-svg/
2 Likes
@N4thyra @DaveC Many thanks for your replies
it’s not about the browser. i tried chrome as well as Firefox but still got no background. finally i solved the problem by applying this method. it works with no problem the only drawback of this method is the number of lines in code but that doesn’t bother in this small project .
@DaveC at first i uploaded the svg file and then linked it like this : background-image:url(‘url.svg’); . thanks for your suggestion i think the inline svg would work 
i will try it
Actually, if you’ve used this method, you’ve already tried it. 
The only difference between mine and the one you liked to is the use of base64 or utf-8 encoding. Because svg is text, you can just use utf-8 and it will work (works great if you’re doing some server-side or JS programming to change colours or something).
Base64 won’t hurt either. Cool thing about base64 is that you can do it to almost any file. You could encode small png/jpg/gif files and include them the exact same way.
Number of added lines can be an issue on complex svgs/images, but if you run it through an optimizer like svgomg, you’ll probably be okay. The main benefit to inline files like this is that it reduces the number of files that need to be downloaded… which can actually speed up your initial load time. Downside? It doesn’t cache and is downloaded every single time.
1 Like
really?
i used data URI it doesn’t look exactly the same as inline SVG. i think inline SVG is like to drop the SVG code directly in tags but in data URI method first we should convert SVG file to data uri after that the process looks the same. am i wrong?
and also thanks for other interesting information you shared i didn’t know about them
You’re right. I use inline pretty freely here to mean anything that’s only in the HTML (or CSS, in your case) and doesn’t download as a separate resource. 
Here’s one way to quickly URI encode an SVG. It uses the “hasher” in Sublime Text 3 and I clear the returns and tab indents before using it. I’m sure other editors have similar features or plug-ins. 
1 Like
oh i see
thanks 
that’s a cool way 
i should check to see if notepad++ has the same feature 