![]() You see, the great thing about using an SVG as a CSS background-image is that they can be styled with CSS background properties. Tip: Use this SVG to CSS converter tool to quickly convert your SVG code into a data URI.Īfter you place your file path or SVG code into the background-image property, you can further tweak how the background displays. It is a best practice to avoid Base64 in this case. You could even convert it to Base64, but that will result in a messier, longer code blob. In the example, we convert the SVG to a Data URI. Notice with this method we have to treat the SVG code before it will work. There are TWO methods for displaying SVG images as a CSS background image:īackground-image: url( '/path/image.svg' ) īackground-image: url( "data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 600 200'%3E%3Cpath d='M10 10h123v123H10z'/%3E%3C/svg%3E" ) ![]() How to add SVGs with CSS (background-image)
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |