Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG zoom limits in browser

Tags:

svg

I have generated a large SVG file, but when viewing it in a web browser I can't zoom in far enough to see all the detail in it. Is there something I can do in the SVG source code to allow this?

The SVG is very tall and thin (1000px wide, 11000px high). When I open it in a browser by default the browser fits the whole thing into the view port, so it's just like a thin stripe down the center of the page - far too zoomed out to actually see anything. The browser allows me to zoom in to some extent, but only up to a certain point and then further zooming is not possible. Is this something that I can control from the SVG code?

The <svg> element looks like this:

<svg viewBox="0 0 1000 11000" version="1.2"  xmlns="http://www.w3.org/2000/svg">

Please note, I am not embedding the SVG in an HTML page, I just have an SVG. Since the most common SVG viewer is a web browser I want people to be able to view the document properly in one.

like image 277
codebox Avatar asked Oct 19 '25 09:10

codebox


1 Answers

Add a suitable height to the SVG. That will force the browser to render it that tall (and the user has to scroll to see the whole thing). For example 5000px tall:

<svg height="5000" viewBox="0 0 1000 11000" version="1.2" xmlns="http://www.w3.org/2000/svg">
like image 94
Sphinxxx Avatar answered Oct 22 '25 04:10

Sphinxxx