I have a city map in SVG vector format. The SVG file is about 15 megabytes. The canvas area in which the map is displayed is 1920 pixels wide by 1080 pixels tall.
The SVG file contains a number of layers including layers for street names, trains, buildings and more.
If you open the SVG file with Adobe Illustrator, you can view the layers, and turn specific layers on and off.
1. Optimize the SVG file.
- Currently the SVG file contains items that fall outside of the crop area. By properly cropping the image, the file-size could be reduced.
- It is possible that the file size of the SVG file could be reduced by reducing the curve detail or the total number of curves.
- Do whatever can be done to reduce the uncompressed file size without loosing quality
2. Render the SVG file through the browser
SVG may be rendered using any of the following:
- HTML <iframe> tag
- HTML <object> tag
- HTML <embed> tag
[login to view URL]
- Flash/ActionScript with as3svgrendererlib Library:
[login to view URL]
- JavaScript
[login to view URL]
- jQuery
[login to view URL]
Please select a method to display the SVG file in the browser. Choose the solution that will perform the best/fastest.
3. The layers of the SVG file should be managed using JavaScript.
For example, the following code should display/hide the street names:
<script type="text/javascript">SVG_Layer('street_names','show');</script>
<script type="text/javascript">SVG_Layer('street_names','hide');</script>
Regardless if you choose to do this project using HTML, JavaScript, jQuery or Flash, the layers should be shown and hidden using JavaScript.
4. Zoom
There should be controls to zoom in and out. There will be six levels of zoom.
5. Panning
The map should pan in a similar way to Google Maps. If a user clicks on the map and drags their pointer to the left, the map should drag to the left.
6. Performance
The map should load quickly and be responsive. It may not cause the browser to freeze or jam, and it should respond quickly and not be sluggish.
You must take whatever measures are required to make it perform well.
For example, maybe the single SVG file should be deviled into a number of smaller files, each a small square.
Google Maps does not load the entire world into the browser at once. Instead Google Maps only loads a few squares at a time as required.
Use whatever methods you must use to make it perform well.
This map will be delivered through a browser on one computer only. It will not actually be on the Internet but it will be viewed using a browser.
It is acceptable if your solution requires a custom Firefox extension, Active X or other non-standard browser requirements.
It is very important that it performs quickly without making the computer jam.
Please do not waste my time. Only bid on this project if you have experience with the SVG format and know that you can successfully complete this project.
This project must be completed by January 27.