Making SVG's have transparent backgrounds

 I have been trying to make some SVG's have transparent backgrounds.


I could just remove a white 'rect' in a small number of cases.


More often, I had to remove a white 'path' going from the outside edges to around the figure.


Sometimes this 'path' is off-white like '#fefefe'.


However, sometimes a white background is needed to show through inside the figure, like for the whites of eyes.


Sometimes a white background is needed as a black figure will not show up against a black background, like for a black cat.


I found it is a good idea to comment out parts of the SVG with XML comments ('<!--', '-->') rather than remove the parts, in case I make a mistake.


I have a black background when the user wants 'dark mode'. I invert the 'html' tag and then invert again the SVG images to get back to the original colors. I use the CSS 'invert' filter.


The SVG's are of animals and are from 'openclipart.org'.


There are more tips at: bbingo.xyz/t

Comments

Popular posts from this blog

webkit-tap-highlight-color in CSS

Steve Jobs quotes