Embed SVG

Post about projects that use Inkscape for web design.
User avatar
NathanMc
Posts: 11
Joined: Tue Jan 02, 2018 11:53 pm

Embed SVG

Postby NathanMc » Tue Jan 16, 2018 12:50 am

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 :)

User avatar
Xav
Posts: 1125
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Embed SVG

Postby Xav » Tue Jan 16, 2018 1:29 am

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.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

User avatar
NathanMc
Posts: 11
Joined: Tue Jan 02, 2018 11:53 pm

Re: Embed SVG

Postby NathanMc » Wed Jan 17, 2018 11:36 pm

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 :)

User avatar
Xav
Posts: 1125
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Embed SVG

Postby Xav » Thu Jan 18, 2018 3:35 am

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.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 2821
Joined: Mon Oct 05, 2015 10:44 am

Re: Embed SVG

Postby Moini » Thu Jan 18, 2018 4:05 am

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).
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Zech
Posts: 43
Joined: Wed Jan 24, 2018 8:38 am

Re: Embed SVG

Postby Zech » Tue Feb 06, 2018 5:18 am

:cry:
Last edited by Zech on Sun Feb 18, 2018 12:31 pm, edited 1 time in total.

tylerdurden
Posts: 2109
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Embed SVG

Postby tylerdurden » Tue Feb 06, 2018 9:27 am

@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.
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

User avatar
prkos
Posts: 1625
Joined: Tue Nov 06, 2007 8:45 am
Location: Croatia

Re: Embed SVG

Postby prkos » Sat Feb 10, 2018 1:56 am

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 :)
just hand over the chocolate and nobody gets hurt

Inkscape Manual on Floss
Inkscape FAQ
very comprehensive Inkscape guide
Inkscape 0.48 Illustrator's Cookbook - 109 recipes to learn and explore Inkscape - with SVG examples to download

Zech
Posts: 43
Joined: Wed Jan 24, 2018 8:38 am

Re: Embed SVG

Postby Zech » Sun Feb 18, 2018 12:30 pm

:cry:

Zech
Posts: 43
Joined: Wed Jan 24, 2018 8:38 am

Re: Embed SVG

Postby Zech » Sun Feb 18, 2018 12:42 pm

@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.

Zech
Posts: 43
Joined: Wed Jan 24, 2018 8:38 am

Re: Embed SVG

Postby Zech » Sun Feb 18, 2018 1:12 pm

Im not active in the forum often


Return to “Inkscape & the Web”

Who is online

Users browsing this forum: No registered users and 1 guest