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
Adding SVG to the skin
-
- 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
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 (2.38 MiB) Viewed 6708 times
- 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
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/
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/
-
- 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
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
- 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
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/
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/
-
- Posts: 36
- Joined: Tue Feb 24, 2015 2:32 pm
Hi Hopki,
here is the PNG file.
Thanks,
Jürgen
here is the PNG file.
Thanks,
Jürgen
- Attachments
-
- header.png (137.71 KiB) Viewed 6692 times
-
- 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
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
- 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.
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.
-
- 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
Could this file then be transformed into an SVG, lets say in Adobe Illustrator?
Thanks for your help,
Jürgen
- Attachments
-
- header24.png (115.44 KiB) Viewed 6668 times
- 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 ?
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 ?
Do not know the answer because we are not using Illustrator. Maybe other forum members could help here with your question.Could this file then be transformed into an SVG, lets say in Adobe Illustrator?
- 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
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/
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/
- 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.
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.
Hi Jürgen,JSchroeder wrote:converted it in Illustrator to SVG
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
Christian