Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Vectors - Only pre-made SVGs seem to work on Smells Like Bakin

I'm trying to do the extra credit of the "Responsive Design" badge as well as converting the .ai files to .svg files at the end of Flexible Images Part One: Vector Graphics.

The only files that work are the ones that come pre-made with the project files. No other vectors will work, and I don't know why. All of the following display a broken, mis-aligned, clipped-off design:

-Creating vectors and saving as .svg with Inkscape -Converting vectors to .svg using Inkscape -Converting vectors to .svg using http://image.online-convert.com/convert-to-svg -Downloading a pre-made .svg found in Wikimedia

So basically, I can't use vectors at all in the SmellsLikeBakin design. I'm really annoyed by this because it basically means I don't know how to use vectors at all, the only thing I've learnt is how to copy and paste from the project files.

It's irritating that I'm learning responsive web design and am floundered by some stupid vector graphics. Help would be much appreciated.

PLEASE don't reply as an "Answer" if you don't have an answer, rather post as a reply to this discussion so the question will remain unanswered until it is done so. Sorry to have to specify that, it's a big fault with these forums.

2 Answers

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Ok here is the answer:

All Inkscape SVGs have to have a VIEWBOX attribute added to them.

The code needs to be formatted like this:

viewBox="0 0 width_of_image height_of_image"

By looking at the code, I can see that the online converter uses Inkscape, AND the downloaded image I used uses Inkscape. This is a MAJOR problem with Inkscape images, and one the Treehouse team does not seem to know about.

I hope this helps someone in the future, this was a serious pain in the butt for me.

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

Difficult to post an answer without seeing your code I can think of a number of factors which may cause the problems your experiencing. Shameless plug below but I was recently tinkering with svg on my website and made a post. On the post there are links to a jsbin which shows you how to manipulate the size of the vector. Hope this proves useful.

http://www.kryptonite-dove.com/design/why-are-you-not-using-svgs

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

The code is the code of the SmellsLikeBakin Website, copied directly from the project files so that I could isolate the issue to the SVGs themselves. The code of the SVGs is unaltered after conversion/creation/downloading.

However in the video, all Allison does is delete the width and height properties from the SVGs themselves. If I do that, the entire image disappears altogether.

When I strip everything back from my page, I can see the SVGs again, hiding right in the background with a Z-Index of like -9000, and everything is placed over the top of them.

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

XML of an SVG downloaded straight from the net, breaks like all the others: http://pastebin.com/LAgyTQ0t