Adds zooming and panning capabilities to SVG files

Latest Version

Version

2.5

Update

September 17, 2024

Size

79.85KiB

Developer

SVG Navigator Extension

Note
--------------------------------
You can access file URLs by going to Chrome's extension settings, and checking \"Allow access to file URLs\"

Usage
--------------------------------
Go to a website with an SVG file. The extension begins working on the SVG graphic and you may:
* Pan: click and drag or hold the space bar and drag the cursor to pan around the image
* Zoom in or out: use mouse scroll wheel
* Zoom: click and drag a zoom box of the desired area if enabled
* Zoom out: tap alt key
* 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.
If you want to view local files with this extension, you must enable \"Allow access to file URLs\" in Chrome's Extensions view.

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.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "SVG Navigator", "short_name": "SVG Nav", "description": "Adds zooming and panning capabilities to SVG files", "version": "2.5", "icons": { "16": "icon_16.png", "48": "icon_48.png", "128": "icon_128.png" }, "background": { "service_worker": "service_worker.js", "type": "module" }, "content_scripts": [ { "matches": [ "http://*/*.svg", "https://*/*.svg", "ftp://*/*.svg", "file://*/*.svg", "http://*/*.svgz", "https://*/*.svgz", "ftp://*/*.svgz", "file://*/*.svgz" ], "js": ["options_custom/js/defaultSettings.js", "js/svgNavigator.js"], "css": ["css/svgNavigator.css"] } ], "manifest_version": 3, "action": { "default_popup": "options_custom/index.html", "default_title": "SVG Navigator", "default_icon": { "16": "icon_16.png", "48": "icon_48.png" } }, "permissions": [ "storage" ]}

Download CRX(79.85KiB)

Similar Extensions

SVG Gobbler Extension · Developer Tools 5,000+ 95 ★ 1.18MiB

PlantUML Viewer Extension · Developer Tools 5,000+ 104 ★ 36.92KiB

Your Graphic Designer Extension · Productivity 5,000+ 39 ★ 1.08MiB

Markdown Here Extension · Productivity 5,000+ 367 ★ 534KiB

SVG Export Extension · Productivity 5,000+ 211 ★ 316KiB

Sourcegraph Extension · Developer Tools 5,000+ 169 ★ 8.22MiB

GitHub Inline SVG Extension · Developer Tools 5,000+ 3 ★ 10.42KiB

Dot Lang Viewer Extension · Productivity 5,000+ 10 ★ 786KiB

Export SVG with Style Extension · Productivity 5,000+ 42 ★ 21.41KiB

Swoosh Cookie and Local Storage Specialist Extension · Developer Tools 5,000+ 121 ★ 720KiB

Save SVG as PNG Extension · Developer Tools 5,000+ 58 ★ 99.75KiB

SVG link viewer Extension · Developer Tools 5,000+ 6 ★ 34.06KiB

XML Tree Extension · Developer Tools 5,000+ 555 ★ 422KiB

Does it use SVG? Extension · Developer Tools 5,000+ 1 ★ 19.75KiB

SVG Fetcher Extension · Developer Tools 5,000+ 3 ★ 13.13KiB

jQuery Debugger Extension · Developer Tools 5,000+ 110 ★ 88.52KiB

CSS Shapes Editor Extension · Developer Tools 5,000+ 101 ★ 84.76KiB

Zoom on doubleclick Extension · Accessibility 5,000+ 62 ★ 51.37KiB

Sight Extension · Developer Tools 5,000+ 248 ★ 871KiB

OctoLinker Extension · Developer Tools 5,000+ 110 ★ 184KiB

Syntaxtic! Extension · Developer Tools 5,000+ 200 ★ 106KiB

Markdown Viewer Extension · Productivity 5,000+ 352 ★ 2.36MiB

Simple WebSocket Client Extension · Developer Tools 5,000+ 97 ★ 53.95KiB

Markdown Preview Plus Extension · Productivity 5,000+ 234 ★ 2.24MiB

User reviews

Andrey (ID: 000000784aefc615) Voted 5 ★ - Updated 09/18/2020 Works great

Kevin Pillay (ID: 0000000de20e7cf8) Voted 5 ★ - Updated 03/19/2020 I am white.

Jure Smrekar (ID: 000000e74defaf24) Voted 5 ★ - Updated 11/07/2019 Perfect extension, thanks. Works also with the local SVGs, just have to enable the access URL option under its extension options as described many times. M donating :)

Ramona B (ID: 0000006a39b58f4f) Voted 3 ★ - Updated 05/23/2019 Does not seem to work on locally stored svgs opened in Chrome...

Peter Marshall (ID: 0000008e7959d1d8) Voted 1 ★ - Updated 11/29/2018 Absolute trash. It doesn't even work

Get source code (.Zip)

Drop .crx file here or click
the button to choose the file

SVG Navigator