Embed SVG using object tag

[asoelist]

Hey forum, 

I was trying to figure out how to embed svg inside object tag. The first link is without using object tag. Please click here for first link.

[asoelist]

So far so good. Now I am trying to embed SVG inside the object tag. Here is second link.

 

(I have to use s3 bucket here and not codepen. I have no idea on how to embed SVG using codepen.)

 

I am using chrome browser. Please "View Page Source" as shown. 

[asoelist]

Then on line 54 on my chrome browser lies the error. If you comment this line out, you get errors. Please refer to console on chrome browser.

 

Is it possible to embed SVG in object tag and use Javascript's contentDocument to manipulate the SVG image?

 

Thanks!

[Cassie]

Hi there! What problem are you trying to solve by using an object? 

It's not a very common practise. It's best to just add your SVG code inline.

 

 

If you want to go ahead with this object approach, If you log out 'line1' in your demo, what do you get in return?
 

[asoelist]

10 minutes ago, Cassie said:

Hi there! What problem are you trying to solve by using an object? 

It's not a very common practise. It's best to just add your SVG code inline.

 

 

If you want to go ahead with this object approach, If you log out 'line1' in your demo, what do you get in return?
 

 

11 minutes ago, Cassie said:

 

If you want to go ahead with this object approach, If you log out 'line1' in your demo, what do you get in return?
 

Thanks Cassie for your prompt reply.

 

I change the repeat from infinity (-1) to 0  and comment out line 54 on my vscode, I will get 150 lines of error. If the repeat is -1 (infinity), the errors will go on and on.

 

Somehow the chrome browser cannot read the SVG file because it is not inline. (it is on separate file). 

[asoelist]

BTW Cassie, I have read briefly the link you posted. 

 

Basically, the solution is to asynchronously fetch the image and insert the element into html page using js script. This has the effect of injecting/inlining the SVG object into DOM html page. So you don't have to use the JS's contentDocument to manipulate SVG Object. 

 

I will try it tomorrow. Thanks for the links. 

[Cassie]

Yep - if I were you I would find a different way to add the SVG DOM into the page! That route sounds like a good plan.

[asoelist]

I tried the fetch and insertAdjacentHTML approach and it worked! 

 

Saves me time on StackOverflow on finding CORS issues on my web backend. (need tweaking in my settings.py)

 

and most importantly the ability to dynamically inserting and removing objects on the frontend which is what I want.

 

Thanks again Cassie. 

[Cassie]

Woohoo! Brilliant! Glad you got sorted 🥳