Adding SVG to the skin

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
JSchroeder
Posts: 36
Joined: Tue Feb 24, 2015 2:32 pm

I am trying to add a SVG to a skin.
I copied a banner form my customer's website, converted it in Illustrator to SVG and now I would like to implement it into a Pano.
The SVG is a Header, which should follow the size of the browser.

How do I do that?

My first problem comes with the SVG itself. I copied it to the skin, but it does not show in the tour. Other SVG's do show as they should.

Did I do something wrong when saving it in Illustrator? If I open it in a browser, it works perfect.

Your help appreciated as always.

Best regards,
Jürgen
JSchroeder
Posts: 36
Joined: Tue Feb 24, 2015 2:32 pm

The whole image to SVG formatting does not seem to work,

I am attaching a screenshot, which explains on what I would like to do:

I have copied the header from my customers webpage and would like the pano appear with the same header.
The header should scale with the browser window.
Any suggestion on how to do that?

Thanks for your help,

Jürgen
Attachments
Bildschirmfoto 2015-07-06 um 14.45.54.png
Bildschirmfoto 2015-07-06 um 14.45.54.png (2.38 MiB) Viewed 6708 times
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Jürgen,
If you convert an image, say PNG to SVG, you are probably only putting the PNG in an SVG container, so not much point.
Would be better to leave as PNG, of course thats if it is a PNG.

As its an image you would use an external loader, this has the ability to scale an image with its correct aspect ration.
You can not do this directly with a PNG in the skin editor, for now.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
JSchroeder
Posts: 36
Joined: Tue Feb 24, 2015 2:32 pm

Hi Hopki,
thanks for your quick reply.
So I draw an external image loader, put my picture inside and then set the modifier of the loader to scale and FoV?

Best regards,
Jürgen
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Jürgen,
Scaling is a feature of version 5, just so we are clear.
You would add the external loader to the skin and say set its position to X/Y 0%
Then make the external loader the same size as the image, then change it's size to %.
Do you have the original image, before you made it into an SVG?
If so post it up and ill have a go at it.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
JSchroeder
Posts: 36
Joined: Tue Feb 24, 2015 2:32 pm

Hi Hopki,
here is the PNG file.

Thanks,
Jürgen
Attachments
header.png
header.png (137.71 KiB) Viewed 6692 times
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

No I did not download it because it is for Martin.
Just curious is it an 8 or 24bit .png ?
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
JSchroeder
Posts: 36
Joined: Tue Feb 24, 2015 2:32 pm

Hi Dave,
good question. Photoshop offers the option of PNG-8 export or PNG.
So I would assume the PNG is 16bit. But I am not sure.

Thanks for your help.
Jürgen
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Hmm let me review your photo in Win8.1 64bit PSCS6 (non Cloud version).

Opened your graphic in PS.

I first checked File | Info. No information available.
Looked around for other PS elements that would display information about the graphic properties. Found none.

Using Bridge Metadata panel | File Properties:
Filename: header.png
Doc Type PNG Image
Application Adobe Photoshop CC 2015 (Macintosh)
Created 7/3/2015 11:02 AM
Filesize 137lb
Dimensions 1051 x 106
Res: 72 ppi
Color Mode RGB
Color Profile Apple iMac-1

Then in PS I looked above at the graphic file name.. Learned that it is header.png @ 100% (Layer 0, RGB/8) or 8bit png.

File | SAVE For WEB: Preset PNG-24 [x]transparent is the way to convert your 8 bit to 24-bit .png if you need the higher bit count.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
JSchroeder
Posts: 36
Joined: Tue Feb 24, 2015 2:32 pm

Ahhhhh, now that's a difference!

Could this file then be transformed into an SVG, lets say in Adobe Illustrator?

Thanks for your help,

Jürgen
Attachments
header24.png
header24.png (115.44 KiB) Viewed 6668 times
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Image is still same dimension size and is reporting still to be 8bit in my PSCS6. I checked with the bridge too. Same

Maybe when you uploaded the image to the forum .... the forum software changed the image back from 24bit to 8bit as a part of keeping the displayed image forum archived storage image small.

Did you try the new 24bit image to see it it scales properly to fit full screen and small responsive screen design ?
Could this file then be transformed into an SVG, lets say in Adobe Illustrator?
Do not know the answer because we are not using Illustrator. Maybe other forum members could help here with your question.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Please see attached project. The only other thing I would do is have two borders the same colour so you can pad the sides out. You can also anchor them left and right so as you make the screen larger and smaller you don't see the gap at the sides.
But as said absolutely no point in making this an SVG.
Regards,
Hopki
Attachments
Jürgen.zip
(583.73 KiB) Downloaded 240 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Interesting. Using Chrome 40x and clicked on Martins index_1.html. Chrome barked at me for looking at the package locally. I clicked on the javascript ERR and the panorama opened properly in a new tab window.

Your header24.png opened full header width. The missing 2 bookend panels were missing of course. I clicked on the browser window edge to drag it smaller.... AND the header24.png automatically rescaled itself proportionately smaller to 344 x 256 px @72 ppi.

And this is a good thing.
344x265scaled
344x265scaled
headersmall.png (25.96 KiB) Viewed 6653 times
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

JSchroeder wrote:converted it in Illustrator to SVG
Hi Jürgen,

how did you convert it? I don't think you have converted it, because SVG is a Vector Graphic. Making a vector graphic out of a pixel image will be a work for hours, with all he details like the AstonMartin- and Bentley-logo rather a work of days. I mean you "renamed" a pixel image to a svg. You can read the svg-file with textEdit and I am sure you will see the svg has the vectors for the box filled with the image. Doing this doesn't add sharpness or any advantage of an svg-file to your header. If you really want a svg-file look for the logos in ai-, eps- or svg-format with Mr.Google and rebuild the entire graphic from scratch.
Have a nice day

Christian
Post Reply