KPC
Kevin Powell - Community•2mo ago
dys 🐙

¿How to have a transparent background on an `<object>` embedded SVG?

When SVGs are embedded into the page using an <img> tag, scripts don't run and user interactions don't work. Using an <object> tag fixes those issues, but causes the element to have a white background, regardless of the color-scheme value. What I'd really like is to allow SMIL & CSS user interactions, but limit script execution since I'll be displaying images from unknown sources. I know <iframe> has some sandboxing options, but also doesn't allow compositing. Actually, if I have a color-scheme in the SVG document it'll darken the background. Or, if I inline the SVG, it'll do true transparency. I'm tempted to write a script to fetch all the SVGs and insert them into the document DOM. That will open the door to scripts, but I guess I could sanitize the images before including them. ¿Is that a fool's errand? ¿How would y'all handle this background color problem?
No description
5 Replies
ἔρως
ἔρως•2mo ago
have you tried to inherit the background color in the <object>?
dys 🐙
dys 🐙OP•2mo ago
Yeah. Setting background on object has no effect.
ἔρως
ἔρως•2mo ago
have you tried to add allowbackground?
b1mind
b1mind•2mo ago
Inline them with no fill for svg and remove any bgs
Chris Bolson
Chris Bolson•2mo ago
You could try something like this but in my tests I couldn't get it to respect the width. I also don't know if this will allow your interactions 
<object
  type="text/html"
  data='data:text/html,
    <style>
      html,body{margin:0;width:100%;color-scheme: light dark; display: flex; justify-content:center;}
      img{height:100%;}
    </style>
    <img src="https://w3s.link/ipfs/bafybeia7uzl5kd5f7vb77bgfdwrcn72kftcjdabexqlhx45k7ta4lqxoti/" />   
  '
></object>
<object
  type="text/html"
  data='data:text/html,
    <style>
      html,body{margin:0;width:100%;color-scheme: light dark; display: flex; justify-content:center;}
      img{height:100%;}
    </style>
    <img src="https://w3s.link/ipfs/bafybeia7uzl5kd5f7vb77bgfdwrcn72kftcjdabexqlhx45k7ta4lqxoti/" />   
  '
></object>

Did you find this page helpful?