SVG Image Explanation?

Q&A about the latest versions
Post Reply
User avatar
1uv3
Posts: 339
Joined: Thu Sep 20, 2018 10:18 pm

SVG Image Explanation?

Post by 1uv3 » Sun Sep 23, 2018 12:52 am

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!
Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.

User avatar
Tony
Posts: 875
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: SVG Image Explanation?

Post by Tony » Sun Sep 23, 2018 6:29 am

Hi,

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

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
1uv3
Posts: 339
Joined: Thu Sep 20, 2018 10:18 pm

Re: SVG Image Explanation?

Post by 1uv3 » Sun Sep 23, 2018 9:21 pm

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 :-)
Attachments
pointer-svg.zip
(14.31 KiB) Downloaded 14 times
Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.

User avatar
Tony
Posts: 875
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: SVG Image Explanation?

Post by Tony » Mon Sep 24, 2018 6:22 am

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 783 times

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

Tony
Attachments
biscuits.zip
(12.03 KiB) Downloaded 12 times
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
1uv3
Posts: 339
Joined: Thu Sep 20, 2018 10:18 pm

Re: SVG Image Explanation?

Post by 1uv3 » Mon Sep 24, 2018 6:57 am

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.
Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.

User avatar
Tony
Posts: 875
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: SVG Image Explanation?

Post by Tony » Mon Sep 24, 2018 9:43 am

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 777 times

and a close up...

patch2.jpg
patch2.jpg (244.71 KiB) Viewed 777 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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
1uv3
Posts: 339
Joined: Thu Sep 20, 2018 10:18 pm

Re: SVG Image Explanation?

Post by 1uv3 » Mon Sep 24, 2018 8:36 pm

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!
Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.

User avatar
1uv3
Posts: 339
Joined: Thu Sep 20, 2018 10:18 pm

Re: SVG Image Explanation?

Post by 1uv3 » Tue Sep 25, 2018 3:00 am

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 :-)
Last edited by 1uv3 on Tue Sep 25, 2018 9:49 pm, edited 1 time in total.
Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.

wiso
Posts: 171
Joined: Wed Oct 26, 2016 6:52 pm

Re: SVG Image Explanation?

Post by wiso » Tue Sep 25, 2018 10:43 am

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

thank you,
wiso

User avatar
Hopki
Gnome
Posts: 9806
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: SVG Image Explanation?

Post by Hopki » Tue Sep 25, 2018 10:49 pm

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

Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests