Confused about SVG files in Pano2VR

Q&A about the latest versions
Post Reply
Andrew H
Posts: 86
Joined: Thu Apr 30, 2009 7:04 pm

I am confused about using SVG files in skins in Pano2VR.

I have made a logo as a scalable vector graphic - it contains no bitmapped elements, only vectors - and placed it in a skin as an SVG file, with its actions defined such that it scales up to 200% when the mouse hovers over it.

This works, but from the fuzzy result it is clear that what is displayed on screen is a bitmap which has been made from the logo at 100% and then zoomed up to 200%, and not a new bitmap made after scaling up the vectors to 200%.

So does Pano2VR rasterise SVG files before using them? If so, I can't see the benefit of using them instead of a normal bitmapped file such as a .png.

Can anyone throw any light on this, please?

Regards

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

Hi Andrew,
Scaling any image will cause a quality loss, as you are scaling the image not adjusting the size.
With SVG"s you can adjust the size and keep good quality.

Example 50px x 50px = Good
Resize to 100px x 100px = Good

50px x 50px scaled up 50% = not good

Try making the SVG large, then scale down?

Hope this helps.
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/
Andrew H
Posts: 86
Joined: Thu Apr 30, 2009 7:04 pm

Hello Martin, thanks for your reply.

I had assumed, incorrectly, that my logo in SVG format would be maintained in vector form into the Flash output file, so that it would be dynamically resized as required by any actions in the skin and thus still give nice clean edges when scaled to 200% in the example in my original post.

What actually occurs, it seems, is that when the Create All button is clicked in Pano2VR any SVG elements in the skin are rasterised at whatever size they have been declared in the skin editor, and it is these bitmaps which are written into the Flash file.

This can be seen by selecting the Externalise option in the Flash parameters in Pano2VR, and then inspecting the contents of the images folder which Pano2VR creates. Any SVG elements will be found to have been rasterised to .png files.

So it seems the only advantage of using SVG files is that they can be imported into a skin at any size without loss of quality which obviously is not the case when importing bitmapped images.

Is this how you see it, Martin?

Regards

Andrew
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

You probably already read this in another thread.
http://ggnome.com/forum/viewtopic.php?f=6&t=9001
Hi Andrew,
Use SVG buttons, SVG's will be used in the HTML5 output and look good with the retina display as long as they are not scaled.
Flash will convert to png as it can not use SVG. However its still good to use the SVG in the skin as you can resize the SVG and then when you output it will be good quality.

For sharp images in Flash use SWF, you can convert an SVG to SWF in Adobe Illustrator. The same as SVG, they will look good as long as you don't scale them.
Regards,
Hopki
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
jobes
Posts: 87
Joined: Fri Mar 07, 2008 2:34 am
Contact:

I've found it's beneficial to use UI elements as SVGs for several reasons
  • • Text elements look clean and legible, without embedding custom fonts
    • Whether they remain as SVG or are rendered as PNGs (for Flash-based tours) they display well on different sizes of screens as long as they're not scaled
    • It's a good solution for displaying on mobile (supporting retina/high resolution and standard res)
    • You can use Hopki's tip of colourising them (if you'd like different button colours etc)
I've always developed visual assets in Illustrator anyway, so it's a natural step for me to use them more. Hope you find them useful
Andrew H
Posts: 86
Joined: Thu Apr 30, 2009 7:04 pm

Interesting, thanks Joby.

While I had realised that Pano2VR rasterises SVGs for its Flash output I hadn't realised that for HTML5 it retains them in a resolution independant, vector format and therefore they are better suited to today's Retina and similarly equipped devices, for which HTML5 is the more likely vehicle for the display of 360 degree panoramas.

Now that I have seen the light I am busing making SVGs to replace the PNGs in a complicated skin for a 28 node tour I am currently working on.

I assume that for elements with text content it's best to convert the text to paths in Illustrator to avoid any subsequent font issues on a visitor's machine?

Regards

Andrew
Post Reply