SVG Image Explanation?

[TheRealMojoJojo]

Hi,
I have a question.

I often work with vector graphics in Illustrator so am familiar with them. However, I am not familiar with what Pano2VR expects or accepts for the file to work as intended with the color picker in the skin settings.

I have been taking some of my graphics and converting them into svg files which works except that these particular converted images do not work with the color changer. If I start from scratch and create an image and save it is a svg, then this seems to work with the color changer.

What are the requirements to have all images accepted so that the color picker will work with them? I don't want to have to recreate all of my artwork from scratch so if anyone with any info could point me in the right direction it would be greatly appreciated.

Thanks!

[Tony]

Hi,

If you can upload one of the illustrator files that's not working I can take a look at it.

Tony

[TheRealMojoJojo]

Hi Tony,

Thanks for the assistance. I have attached the zipped svg file.

My first thoughts are that this has something to do with customizing the images with gradient, drop shadow, slicing, bevel, etc.... or maybe even converting images into svg from different non-conforming file types such as bitmap because I have noticed that if I convert a circle bitmap image into an svg and add it to the skin, what happens is that the bitmap will be on the stage, however you cannot see it until you preview it in the previewer or publish it. And then if you add color from the color picker, instead of colorizing just the circle, it instead colorizes the entire square container.

You help is appreciated! Thanks for taking a look and hopefully we can figure this out

[Tony]

Hi,

The file 'pointer-svg' is a png file in an svg wrapper. If you look at the pointer.svg file in a text editor you will see that there is a 'viewBox' defined that's 252 x 249 pixels and it contains a png file.

Code: Select all

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 252 249"><title>pointer-svg</title><image width="336" height="332" transform="scale(0.75)" xlink:href="data:image/png;base64

Pano2VR can only change vector based elements in an svg file that define the colour of an element. The elements I've found so far are StopColor | Stroke | Fill. Stroke and Fill are pretty self explanatory, StopColor defines one of the colors in a gradient.

For example the following svg logo, biscuits.svg has all 3 element attributes in it and they can be changed.

svg_sample.jpg (813.97 KiB) Viewed 3893 times

I've attached the biscuits.svg and a biscuits.ggsk to the post.

Tony

[TheRealMojoJojo]

AHA! That makes a heck of a lot more sense than what I was saying Thanks so much for figuring that out! To be honest, I didn't even think to open it in a text file because I didn't know you would get anything useful out of it

Do you know off hand if there is any way to actually "convert" an image into a true svg file? i will do some searching myself to see if I can come up with anything. If not, then I guess it'll have to be all from scratch

Again, thank you for you help......and by the way, do you know Damir? IOSVR? He's been a friend for about 4 years and lives in Adelaide.

[Tony]

To be honest, I didn't even think to open it in a text file because I didn't know you would get anything useful out of it

In pure vector form SVG is a just a set of text instructions that define shapes, paths etc.

Do you know off hand if there is any way to actually "convert" an image into a true svg file? i will do some searching myself to see if I can come up with anything. If not, then I guess it'll have to be all from scratch

Are you talking about a continuous tone image such as a jpg photo of someone? Or are you thinking more of an illustration? If it's continous tone Adobe Illustrator Trace does an amazing job. Here's a traced image of me that I can export as an SVG into Pano2VR and then change colors using the Color Tool. FYI the image on the left is the traced version!

patch1.jpg (994.82 KiB) Viewed 3887 times

and a close up...

patch2.jpg (244.71 KiB) Viewed 3887 times

Again, thank you for you help......and by the way, do you know Damir? IOSVR? He's been a friend for about 4 years and lives in Adelaide.

Yes I've known Damir for a long time, he's doing some great work at the moment.

Tony

[TheRealMojoJojo]

Hi Tony!

In pure vector form SVG is a just a set of text instructions that define shapes, paths etc.

That makes sense because opening a jpg, png, gif, etc... in a text editor only gives you garbled code.

Are you talking about a continuous tone image such as a jpg photo of someone? Or are you thinking more of an illustration?

I was thinking of either but your example shows me that in order to properly convert for Pano2VR, the image itself has to become vectorized by grouping and then filling similarly colored pixels. Am I understanding that correctly?

If it's continous tone Adobe Illustrator Trace does an amazing job.

I am learning to do this right now

Yes I've known Damir for a long time, he's doing some great work at the moment.

I figured you would know him. He's a great guy and does some really amazing stuff. He's also helped me through some rough patches personally.

Thanks for taking the time to explain all of that. You've obviously been doing this for a while and your help is appreciated. I'm sure I'll have more questions

Thanks again Tony!

[TheRealMojoJojo]

Have to thank you one more time Tony.

With your help I am now able to convert all my artwork into svg and the best part is that I'm able to trace in Illustrator with low fidelity which still keeps very close to the originals but with less colors (which is good because I don't want 1,000 different color gradients to have to deal with in Pano2VR color changer), then in the color picker I can choose all gradients of similar color and just adjust the hue to have all of those similar colors change while keeping the different gradient color shades

I am a happy camper

[wiso]

oh, changing the colour for svg within pano2vr: wonderful!

thank you,
wiso

[Hopki]

wiso,
Have a look at this document with a hopki video: https://ggnome.com/doc/pano2vr/beta/skin-color-tool/
Regards,
Hopki