Menu
Is it possible to wrap a SVG image inside a border (that is - putting a border from CSS around that image) .
218
You can use the stroke of the <rect> as the border. This is the correct answer when it comes to svg:image.
There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties. Some of these attributes are SVG-only while others are already shared in CSS, such as font-size or opacity .
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
Draw a <rect> round the image which is fill="none". You can use the stroke of the <rect> as the border.
89
Here are some examples, tested in Firefox:
<svg width="100" height="100" style="border:1px solid black"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> <br><br> <svg width="300" height="100" style="border:1px solid black"> <rect width="300" height="100" style="fill:rgb(110, 50, 25); stroke-width:4; stroke:rgb(43, 222, 221);" /> </svg> <br><br> <svg width="170" height="170" style="border:1px solid black"> <rect x="10" y="10" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9;" /> </svg> Hope it helps. :)
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
