c4gd4s / svg-navigator---chrome-extension

SVG Navigator is an extension for Google Chrome that adds pan and zoom features to existing SVG files on the web.

SVG Navigator - Chrome Extension

SVG Navigator is an extension for Google Chrome that adds pan and zoom features to existing SVG files on the web.

Usage

Go to a website with an SVG file. The extension begins working on the SVG graphic, and the user may:

• Pan: hold the space bar and drag the cursor to pan around the image
• Zoom: click and drag a zoom box of the desired area
• Zoom out: tap alt key
• Zoom in or out: use mouse scroll wheel
• Reset zoom: press escape
  Trying to pan on an SVG by shift click and dragging currently causes undesirable panning; possibly a Google Chrome bug/feature.

Try Testing out these SVGs

• Vector vs Raster: http://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg
• World Map: http://upload.wikimedia.org/wikipedia/commons/1/17/World.svg
• Animated world landmarks: http://svg.kvalitne.cz/worldlandmarks/worldlandmarks.svg
• Map of the United States of America: http://upload.wikimedia.org/wikipedia/commons/d/dc/USA_orthographic.svg
• Another USA map: http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg
• Constellation Orion: http://upload.wikimedia.org/wikipedia/commons/f/ff/Orion_IAU.svg
• Bertrand's Chords: http://upload.wikimedia.org/wikipedia/commons/9/91/Bertrand3-chords.svg
• P and N type Silicon: http://upload.wikimedia.org/wikipedia/commons/2/20/CellStructure-SiCrystal-eng-vect.svg
• Diagram of Zeta Potential and Slipping Plane: http://upload.wikimedia.org/wikipedia/commons/6/62/Diagram_of_zeta_potential_and_slipping_plane.svg
• Earth Color Trace: http://upload.wikimedia.org/wikipedia/commons/4/4e/Earth_Color_Trace.svg
• Magnetic Moment: http://upload.wikimedia.org/wikipedia/commons/4/4c/Magnetic_moment.svg
• Simple Mandelbrot: http://upload.wikimedia.org/wikipedia/commons/3/3c/Mandelbrot_Components.svg
• Animated Digitial Clock: http://www.bogotobogo.com/svg_source/SVGDigitalClock.svg

Useful Links

• SVG 1.1 Second Edition Specifications: http://www.w3.org/TR/SVG11/
• Official Google Chrome extension page: https://chrome.google.com/webstore/detail/svg-navigator/pefngfjmidahdaahgehodmfodhhhofkl
• Github Repository: https://github.com/pRizz/SVG-Navigator---Chrome-Extension

Acknowledgements

Concept originally created by Asad Akram, Ryan Oblenida aka Mr. O, and Peter Ryszkiewicz at the Illinois Institute of Technology. Adapted as a Google Chrome extension by Peter Ryszkiewicz. Work was inspired by Kevin Lindsey at http://www.kevlindev.com/index.htm.