Page 1 of 1

SVG Image Explanation?

Posted: Sun Sep 23, 2018 12:52 am
by 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!

Re: SVG Image Explanation?

Posted: Sun Sep 23, 2018 6:29 am
by Tony
Hi,

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

Tony

Re: SVG Image Explanation?

Posted: Sun Sep 23, 2018 9:21 pm
by 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 :-)

Re: SVG Image Explanation?

Posted: Mon Sep 24, 2018 6:22 am
by 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
svg_sample.jpg (813.97 KiB) Viewed 4189 times

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

Tony

Re: SVG Image Explanation?

Posted: Mon Sep 24, 2018 6:57 am
by 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.

Re: SVG Image Explanation?

Posted: Mon Sep 24, 2018 9:43 am
by 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
patch1.jpg (994.82 KiB) Viewed 4183 times

and a close up...

patch2.jpg
patch2.jpg (244.71 KiB) Viewed 4183 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

Re: SVG Image Explanation?

Posted: Mon Sep 24, 2018 8:36 pm
by 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!

Re: SVG Image Explanation?

Posted: Tue Sep 25, 2018 3:00 am
by 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 :-)

Re: SVG Image Explanation?

Posted: Tue Sep 25, 2018 10:43 am
by wiso
oh, changing the colour for svg within pano2vr: wonderful!

thank you,
wiso

Re: SVG Image Explanation?

Posted: Tue Sep 25, 2018 10:49 pm
by Hopki
wiso,
Have a look at this document with a hopki video: https://ggnome.com/doc/pano2vr/beta/skin-color-tool/
Regards,
Hopki