Overview
This “Little Bits” tutorial shows you how to retrieve SVG images from a Pano2VR skin in their original format.
Note: this tutorial is designed for Pano2VR V6.1.+. You can download the software here. As “Little Bits” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.
Note: as I only have access to a mac desktop there may be some differences in the implementation in Windows, any feedback would be appreciated.
Copyright
This tutorial is intended for use with images that you have copyright/permission to use and should not be used for any other purpose.
Project Overview
In earlier versions of Pano2VR, SVG images added to the skin could be found in the images folder within the project. In the unfortunate situation where the original SVG images had been lost or misplaced they could be easily be retrieved from the project file.
However, after Version 5 was released the SVG images are now Base64 encoded. This means, if they are under 10kb in size, they may no longer be saved as a physical SVG image and instead encoded in an ASCII string.
This means that an SVG image like this, used in a project…
… is represented like this in the skin,
rather than directly like: img.setAttribute('src',basePath + 'images/mountains.svg');
The good news is the lost image/s can easily be retrieved from the skin.
Getting Started
1. Open your Pano2VR project in a browser. I’m on the Mac so I’m going to show both Chrome and Safari versions.
Note: you can open the project directly from Pano2VR or you can browse to the URL of the published project.
Chrome
1. With the project open, from the Chrome menu select, View > Developer > Developer Tools (Figure #1)
Figure #1: Select Developer Tools.
2. From the Developer Tool menu select Network(Figure #2)
Figure #2: select Network
3. Select command R, this will reload the project and show you the content. (Figure #3)
Figure #3: reload the project
4. Click on the data.image/svg… element to see a preview of the image (Figure #4)
Figure #4: identify the image
5. Rt Click on the image and select Save; rename the file and select the save location.
Safari
1. With the project open, from the Apple menu select, Develop > Show Web Inspector (Figure #5)
Figure #5: Open Show Web Inspector
2. From the Web Inspector menu select Sources > By Type (Figure #6)
Figure #6: select Sources > By Type
3. Click to open the Images folder and select the data:image/svg+xml… element to display a preview (Figure #7)
Figure #7: Open images folder and select the image
4. Rt Click on the element and select Save File; rename the file and select the save location. (Figure #8)
Figure #8: Save file
In both cases the images have been saved as SVG and can be opened in applications like Adobe Illustrator or other vector editing applications. (Figure #9)
Figure #9: Files saved from Chrome and Safari
Summary
I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.
