Putting an svg image into my website

Post questions on how to use or achieve an effect in Inkscape.
Ged
Posts: 50
Joined: Wed Sep 16, 2015 3:01 pm

Putting an svg image into my website

Postby Ged » Fri Mar 04, 2016 6:17 pm

Im new to Inkscape but I have managed to complete several images. Now I want to get those images on to my website. How do I do it?

Loading an svg image is so different to loading a png or jpeg or gif. I simply dont know what to do?? :? I have a drupal website and when I create content, it asks me, "do you want to create a page or an image?" But what is svg - an image or an.html

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Putting an svg image into my website

Postby Lazur » Fri Mar 04, 2016 6:53 pm

Hi.

Svg is an xml document. Probably you need to add some viewbox for embedding?

Haven't tried it myself. Maybe this can give some hints.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Putting an svg image into my website

Postby brynn » Fri Mar 04, 2016 8:17 pm

Putting an SVG image into a website is no different from putting a PNG or GIF. But before I explain further, I should say that I only know how to use simple HTML. So I can only give you the bare basics, or general idea. I can't give you specific steps.

When I first was researching how to create a new website (for myself), I looked into Drupal and Joomla both. But honestly, I couldn't make heads or tails out of either one. I could get exactly as far as you got with Drupal. Then the create page or image thing is where I would get stuck. (What does it mean "create an image"? This isn't a graphics program, is it? And clicking on the image option - I don't remember what happened, but it just was not intuitive at all.)

In the end, I decided to use SMF forum (or similar) where the code that creates the website is already done for you. So far, I've found it to be very flexible. With different mods, you can have regular whole webpages, as well as the basic forum. I'm not sure if you could install something like that, and then disable the forum (I realize you didn't mention a forum at all). But there must be programs that provide a website (without a forum) that's already coded, where you only have to customize it.

Ok, so back to your questions. SVG files are both images and XML documents. The XML/SVG code creates the image.

First, the image needs to be uploaded to your server. Once it's uploaded, it will have a URL, which is the address where the image is now living on the internet. I don't know what kind of setup you have, but that should be fairly obvious to you by now, how to find the URL.
[edit - deleted some gibberish, was falling asleep when originally posted]

I hope some of that will help. Good luck!

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

Re: Putting an svg image into my website

Postby Moini » Sat Mar 05, 2016 3:21 am

There are several ways to do this:

- just add the SVG source code into the page or into the CSS
- add an img tag and use the SVG as its source (Internet explorer sometimes has difficulties with keeping the correct aspect ratio)
- use embed or object tags if you have javascript animated SVGs

Also see the Inkscape manual: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web.html
and here is an epic guide:
https://css-tricks.com/scale-svg/
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)

Ged
Posts: 50
Joined: Wed Sep 16, 2015 3:01 pm

Re: Putting an svg image into my website

Postby Ged » Sat Mar 05, 2016 8:59 am

Drupal packed a hissy fit, so I took off these first two lines:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->


... and wella! Up she came. Thanks for the good links and help. :)


Return to “Help with using Inkscape”