Hi everyone!
Not sure if it's been asked before, but I'll try my luck. Does anyone know how to embed SVG format images in HTML pages, e.g. my own website? I'm open to any advice, thank in advance

That depends on what you mean by "embed". If all you want is to include static SVG images, you can use them anywhere a raster image is allowed these days - e.g. in an HTML <img> tag or in a CSS background-image property.

If you need interactivity, animation or embedded Javascript to run then you may want to use an <object> element to hold a link to the SVG file.

Finally, you can directly put the SVG code into HTML these days. That can be useful when you want to dynamically modify the image using Javascript as you can just use the same sort of code that you would on other elements in the page.

Thanks for your advice! and yes I would like to do embed an SVG file as an interactivity object, but I have no knowledge about creating animation with Javascript or object tag...so a sample of code, or a guide would be much appreciated

If you have no knowledge about JavaScript or the <object> tag, then I doubt a sample of code will get you very far. Especially when it comes to interactive SVG - there's a whole lot of background knowledge needed before you'll get very far. In all honesty you're better off learning how to use JavaScript to dynamically change HTML; the techniques are basically the same as for SVG, but it's a lot easier to try it out in the browser, and there are a lot more resources online. Once you know what the DOM is and how to manipulate it, then you can start applying that knowledge to SVG.

I do plan to include some basic SVG-in-html stuff in my tutorial series, but I doubt I'll get to that for many months yet.

Some info relating to animations is available at the inkscape.org website: https://inkscape.org/en/learn/animation/ - most of it requires some knowledge of Javascript, but some also have graphical user interfaces that allow you to generate animations (if that's enough for your purpose).

@Zech:

Give it a rest. Do not crosspost. You already have a topic on the subject. You don't need to ding every topic with "animation" somewhere in the thread.

Since you've put in a wishlist request at launchpad, you can be confident that the most likely people to act on it will have seen it. Do not subscribe others (like me) on launchpad as you have been admonished there too.

This spammy isht will get you banned, for good reason... its redundant, distracting and annoying.

There are some great resources out there about each method, and when you should use one or the other. You said interactivity - but in which way? Visitors interacting with your drawing or maybe just animating the SVG?

Because the issue is so complex it's not possible to write it up in a forum post, but I found the best source for all the details about this is Sara Soueidan, she has articles and tutorials and also videos:

Sara Soueidan – SVG Lessons I Learned The Hard Way
https://www.youtube.com/watch?v=NkLDuPf5P0A

Sara Soueidan: SVG for Web Designers (and Developers)
https://www.youtube.com/watch?v=q4QI9iOeyPo

There are js libraries you can use to simplify SVG animations:
Raphaël.js: here is a video by its creator Dmitry Baranovskiy - You Don't Know SVG https://www.youtube.com/watch?v=SeLOt_BRAqc
GreenSock: Animating SVG with GSAP https://greensock.com/svg-tips
etc.

Happy learning
Shows us what you've created once you have something

@tyler
Oops! Sorry didnt know that you couldnt. Link posts I thought that was just a discussion about animating sorry for being annoying. Have a nice dya.

Im not active in the forum often