Attempting to convert png to svg and insert in place of logo. attempt 1 unsuccessful


(kurt) #1

Hello,
After getting into my own web design it became clear that SVG images are the best for responsive websites. I attempted to export an SVG format from gimp and found this was not possible. I proceeded to download Inkscape to import the image of choice into for conversion to SVG format. This seemed to go well and I have what appears to be an SVG format of my image. I attempted to place this image into the same 2 column foundation frame that I am using currently. I set the image to the resource SVG file that is in my project and nothing shows up. I also attempted to use the image as a background and SVG files are not allowed in some cases? the SVG file is grayed out for selection.

What do I do?

p.s. the only reason I have no content on my page is when I set up a column and attempt to insert one large image that spans the width of the page nothing shows up. Days of messing with rapid weaver and I have a simple but nice top navigation bar and have learned a lot but still feel like a sailboat with no wind :o/


(Mathew Mitchell) #2

I don’t have any answers for you. But it seems strange to me that RealMac is now slow with SVG integration into RW. We really should be able to drag/drop SVGs, or use in any manner, just like JPGs and PNGs. They provide a huge advantage over other formats (when they are a good fit).


(kurt) #4

i’ll always compare to the first thing I ever used. Dreamwever and front page before flash existed. I was able to pick this up and create pages within days as a kid with no skills. I couldn’t beat the game myst without consulting a guide but I could make some killer looking websites in dreamweaver and front page right off the bat. Photoshop with eye candy for effects and some online font editors. I actually was able to make websites for some extra money. Not finding it quite as easy to drag and drop code. I am going to stick it out and learn the program regardless but just some feedback as a newb.

What would be great?

  1. an edit mode with handles for stacks to resize and reshape as well as drag and drop content. Dreamweaver had this ten years ago.

  2. drag and drop resources. As a first time user with a completely outside view it makes no sense to have the resources in the side bar and not have the ability to drag and drop them into the design. .

  3. For text there should be a very clear to see example of how it will look exactly if the code can output it there should be an example to see somewhere I would imagine… I’m finding it tough to use the text styles stack with the preview. Not sure if it is linked up and working or not as someone with little experience and lacking a working model to compare to.

Not one to complain but these are the three main gripes I have as a completely outside view and first time user.


(Rob D) #5

@kurtfgx – The image you’ve attempted to convert from png to svg – was that a photo or a vector illustration? Note, that photos can not be converted to svg.


(kurt) #6

really? Why? Thank you Rover.

They are high res. jpg and or png format so I guess that counts as a photo.

So I guess my next option is to make three jpeg images of varying size and link all three within foundation for desktop/tablet/mobile correct?

Also, Is there a format that could b output from gimp that can be converted say For the logo? The logo is technically a drawing and in png format. It is also in gimp xcf format to edit. I was attempting to generate a scalable (svg) format header image.


(Rob D) #7

JPEG and PNG are pixel-based formats. SVG is the vector-based format.

Do you have the original drawing files in vector-format? If yes, just ignore your JPEG and PNG files and convert the original directly into SVG format.

If you don’t have vector files, well, I guess, depending on the complexity of your images, you could try to convert your pixel-based files (by means of the process sometimes called “tracing”) to the vector format, using Illustrator or some other vector-based application – loosing a lot of color and detail information in the process – and then convert that to SVG format.

I’ve never tried that method before, so I don’t guarantee that it will work. If your source images contain few colors and details, it may work, but if the source images are photos, this method does not make sense at all.

As for the GIMP, I have no idea. Never used that in my life…


(kurt) #8

thank you again for such detailed info. All of that makes perfect sense.

Unfortunately my files are png and were created by a designer in this format. I was done a disservice as I had specifically asked for responsive website friendly images and was told these would work. . lies…

I would have to have them redrawn into vector format to be able to proceed. This is not impossible. I have the resources for this and will have to have this done immediately.

Just another delay.


(Rob D) #9

While SVG format is ideal for vector drawings, that does not mean that you can not use JPEG or PNG. You will just need to put some extra effort into preparing them and using right settings in RW and in stacks that will contain those images.


(kurt) #10

thanks for all the info. It all makes more sense now.

the good news is I was able to find a way to get these images into the page design and almost have a complete first page first draft.

appreciate the help


(Rob D) #11

You’re welcome. My pleasure…