Use SVG in a browser

Discuss SVG code, accessible via the XML Editor.
jheminger
Posts: 5
Joined: Mon Feb 26, 2018 3:20 am

Use SVG in a browser

Postby jheminger » Mon Feb 26, 2018 4:38 am

I have in the past exported SVG in Illustrator and it rendered in most browsers, Chrome, Firefox, IE, etc...
I saved my file in Inkscape but its not rendering.

Is there something I am doing wrong or is it not possible.

Here is the file:
http://jeremyheminger.com/sites/default ... ry/cat.svg

User avatar
Grobe
Posts: 411
Joined: Tue Feb 02, 2010 2:20 am

Re: Use SVG in a browser

Postby Grobe » Mon Feb 26, 2018 7:29 am

Because the "cat" isn't inside the canvas - it's located far left. To fix this - zoom out, unlock layers, move all objects into canvas.
:lol:

jheminger
Posts: 5
Joined: Mon Feb 26, 2018 3:20 am

Re: Use SVG in a browser

Postby jheminger » Mon Feb 26, 2018 10:10 am

This makes sense. I followed a tutorial on YouTube and he said to turn the canvas off....so I did.

Thanks!

jheminger
Posts: 5
Joined: Mon Feb 26, 2018 3:20 am

Re: Use SVG in a browser

Postby jheminger » Mon Feb 26, 2018 10:16 am


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

Re: Use SVG in a browser

Postby prkos » Mon Feb 26, 2018 8:18 pm

Off topic:
kitty!
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

User avatar
shawnhcorey
Posts: 149
Joined: Mon Jan 07, 2008 12:17 pm

Re: Use SVG in a browser

Postby shawnhcorey » Mon Feb 26, 2018 10:25 pm

Grobe wrote:Because the "cat" isn't inside the canvas - it's located far left. To fix this - zoom out, unlock layers, move all objects into canvas.


Or:
  1. Unlock all layers
  2. Open menu Edit -> Select All in All Layers
  3. Open menu Object -> Align and Distribute...
  4. Under Align, select Relative to: Page
  5. Check Treat selection as group:
  6. Click on the horizontal align to centre icon (third from the left).
  7. Click on the vertical align to centre icon (third from the left).


Return to “SVG / XML Code”