Re: Incomplete rendering for very large SVG images

HelderMagalhaes <[email protected]> Mon, 17 Aug 2009 02:21:27 -0700 (PDT)

Newsgroups	gmane.comp.mozilla.devel.svg
Organization	http://groups.google.com
Message-ID	<ea3cf450-2ec3-46e0-907c-4bf1c75ceb81@f37g2000yqn.googlegroups.com>

Hi Amy,


> I am building a php&mysql application which generates very large svg images.

Do you really need them to be that big? Vector graphics were designed
to workaround those use cases, allowing zoom and pan for detail view.
Unfortunately, Firefox supports those features but has no GUI controls
implemented (see bug 163068 [1]).


> Everything worked fine except for the fapt that when embedding a svg into
> html (using either object or embed tag).

Note that you are using (what seems to be) a somehow faulty HTML
wrapper: a single object tag (no body tag, etc.).


> My embedded object was only rendered up to about 30 000 px width, the rest
> of the rendered image is black.

This *is* weird. Even when manipulating style attributes to force the
HTML canvas to be that big, it doesn't seem to help. Could you have
hit some sort of rendering limit...? Note that Firefox 3.0.x does
display those blank areas, Firefox 3.6a (nightly build) doesn't. I
haven't checked the current 3.5.x release.


> In Firefox, when i choose "Show this frame in a new tab" it shows the image
> at full size (60000 px X 10000 px), without any black areas.

Yes, but note that the sample is also a bit faulty: SVG is an XML
dialect (you are already [2] delivering the proper MIME type) but you
are serving HTML (!):

  <html>
    <body>
      <svg  width='100000px' height='10000px' viewBox='0 0 100000
10000' version='1.0' xmlns='http://www.w3.org/2000/svg'>
        <line onclick='line_click(evt)' x1='200' y1='20' x2='300'
y2='180' style='stroke:black; stroke-width:5'/>
        <circle id='m'  onclick='circle_click(evt)' cx='99000'
cy='100' r='100' fill='black' stroke='black' stroke-width='5'/>
        <line onclick='line_click(evt)' x1='100' y1='20' x2='400'
y2='180' style='stroke:black; stroke-width:5'/>
      </svg>
    </body>
  </html>


> Thanks,

Hope this helps,
 Helder


[1] https://bugzilla.mozilla.org/show_bug.cgi?id=163068
[2] http://web-sniffer.net/?url=http%3A%2F%2Fnetwork.quanttest.ro%2Fteste%2Frect.svg.php&submit=Submit&http=1.1&type=GET&uak=0