more on CPG's SVG plugin

[brynn]

Hi Friends,
Yesterday, Lazur posted a shout that it looked to him like the SVG display in the gallery had been fixed.  So far, I haven't seen any changes.  And indeed, I haven't touched the plugin.  It is entirely unchanged.  But he also mentioned a topic at IF about gradients, which somehow appears to him (as I understand it) to affect the faulty display of SVGs in the IC gallery (apparently seems to fix it).  So now I'm investigating for myself (much too sleepy last night), and starting a topic so that the facts can be documented and saved (the shouts will be bumped away before too long).

Here's the file that's been uploaded to the gallery:  http://inkscapecommunity.com/ic_gallery/albums/userpics/10014/spectrum.svg 

Attached is how I see the gallery page using Firefox (specss.png).  When I open the above file in Ff, it looks the same, only bigger.  And the weirdest part is that when I scroll the browser page, different parts of the file are displayed, and other parts disappear.  It's sort of like scrolling controls a bizarre animation, lol.  (I could attach consecutive screenshots as I scroll, if someone doesn't understand.)  (I think what Lazur means by "vibrating mess" in ref topic below.)

And now to the gradient issue.  This is the topic at IF that Lazur referenced:  http://www.inkscapeforum.com/viewtopic.php?f=34&t=16506  Unfortunately the op's issue is about programming, and references raw svg code, which I really don't understand.  And I don't think the op's issue has been resolved.  But it looks like Lazur found something about the display of gradients....which remains unexplained, at this point (at least I don't understand it).

I added a new album to my gallery for testing, and uploaded 3 simple SVGs -- a solid square, a square with a gradient fill, and a square with 3 smaller squares, each containing a gradient.  But I don't have any issues with display of the files in Firefox.  Each entire image is displayed, and there's no "scrolling animation".  And neither do they seem to have any effect as far as the faulty CPG SVG plugin's display.

So my conclusion at this point, is that Firefox is having trouble with the huge number of gradients in spectrum.svg.  Perhaps should be reported to Mozilla?

And now to test with IE...  Shockingly, IE displays spectrum.svg entirely and flawlessly!  So maybe this really should be reported to Mozilla, lol!!

My only remaining question is about how this apparently affects (fixes?) the faulty SVG plugin's display, in our gallery.  Lazur, can you post a screenshot of what you see, that looks like the display is fixed?  (And please correct any errors I've made in paraphrasing your comments.)

[Lazur]

Here is how the thumbnails look now at 125% zoom:






Note, that t9 and t10 are svg-scontaining a square at the top left corner with the size of 120/120 pixels, and the rest is not showing up -simply cropped,
while the following two files named spectrum are also svg-s, but they are center aligned and scaled proportionally to fit to the thumbnail size.
Maybe that has got to do with the svg size itself, as they both are 2560 pixels wide.
Once the spectrum viewed in "full size" it appears to be scaled to the frame too.
That would be a good thing though.
In my opinion it's much better than cropping from the displayed image.

Also notice, that the raster images are top aligned instead of center aligned.
The raster image's thumbnails next to that two svg-s have their name and description line moved next to the images.






With the gradient rendering issue, I have uploaded some other images too:

http://inkscapecommunity.com/ic_gallery/displayimage.php?album=17&pid=97#top_display_media
http://inkscapecommunity.com/ic_gallery/displayimage.php?album=17&pid=98#top_display_media

[Lazur]

Weird, now all uploaded svg-s seem to be displayed proportionally scaled to fit the display frame, even if it's smaller than the actual size of the original image, in that folder.
Wondering which displaying method is intentional -the scaled, or the cropped.

[Lazur]

Hmm I couldn't yet figure out the whole picture but there really seems to be a connection with that "problematic" svg and how it gets displayed in different proportions than the others.

[Lazur]

I think I got it!

That svg with the spectrum was made from the original svg codes on that linked page, and, it had a line mentioning "viewbox".
If it is deleted, the rendering gets back to be cropped.

Here is a version without the viewbox part in the gallery:
http://inkscapecommunity.com/ic_gallery/displayimage.php?album=17&pid=128#top_display_media

Well it still doesn't get rendered right by firefox.

[brynn]

Once the spectrum viewed in "full size" it appears to be scaled to the frame too.
That would be a good thing though.
In my opinion it's much better than cropping from the displayed image.

Oh, I totally agree!

So "viewbox" is something in the svg code?  I'll investigate in a minute.

In Firefox, I can only see part of spectrum.svg, and spectrum3.svg, not at all.  So I'm not sure if the thumbnail display is cropped or not.   But in IE, I see the same as what you see (in Chrome, right?).

Ok, I'll look for the viewbox thing and brb 

[brynn]

Aahh, so viewBox is an attribute and the value is basically the dimensions of the image, and I'm guessing, position too.  I guess it instructs the browser how to display the image, or something like that?

I mean, if this viewBox attribute will force SVGs to be displayed correctly (with this very buggy plugin), it might be a clunky workaround, until we find someone who can fix it.

I'm going to try and find out more about viewBox attribute.

[Lazur]

 

[brynn]

Aahh, so viewBox is an attribute and the value is basically the dimensions of the image, and I'm guessing, position too.  I guess it instructs the browser how to display the image, or something like that?

Good guess, no prize, lol.

Here's the W3C ref:  http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

Well, it's a little hard for me to understand.  I have a general understanding about what the viewbox does.  But I can't extrapolate from that, a theory as to why the viewbox attribute seems to make the svg thumbnails (and intermediate image) display correctly.

Ok then....well the logical next step for me, is to try and add a viewbox attribute to a test SVG file, cross fingers, and upload it, lol.

[brynn]

Hhmm....ok, I don't see how an attribute can be added to the code, by using the SVG Editor XML Editor.  I guess I'll have to use a text editor.....

still working....

[Lazur]

xMidYMid (the default) - Force uniform scaling.
Align the midpoint X value of the element's ?viewBox? with the midpoint X value of the viewport.
Align the midpoint Y value of the element's ?viewBox? with the midpoint Y value of the viewport.

So if a viewbox attribute is added, with no other restriction it will look center aligned and scaled proportionally.

Some examples here:
tavmjong.free.fr/SVG/VIEWPORT/


This part needs that viewbox attribute to be added for the thumbnails, not sure how yet:

Code: [Select]

<a href="displayimage.php?album=........&amp;pid=........#top_display_media"><div><object data="albums/userpics/.........svg" type="image/svg+xml" width="128" height="128">Your browser doesn't support svg files</object></div><br /></a>

[brynn]

     Haha -- check it out:  http://inkscapecommunity.com/ic_gallery/thumbnails.php?album=18  Look at "viewbox attribute test" image

The thumbnail looks great, compared to the original ("starfire"):  http://inkscapecommunity.com/ic_gallery/thumbnails.php?album=15

However, on the intermediate page, we have a huge version:  http://inkscapecommunity.com/ic_gallery/displayimage.php?album=18&pid=129#top_display_media.  It should be approx 168 x 168 px.  My first guess is that I might need the viewport AND the viewbox attributes.

Comments?

This part needs that viewbox attribute to be added for the thumbnails, not sure how yet:

Code: [Select]

<a href="displayimage.php?album=........&amp;pid=........#top_display_media"><div><object data="albums/userpics/.........svg" type="image/svg+xml" width="128" height="128">Your browser doesn't support svg files</object></div><br /></a>

Well that is HTML, isn't it?  I know XML is similar to, or based on, or somehow related to HTML.  But that looks like strictly html to me.  (I have the feeling I'm about to have a big ah-ha, lol!)

Edit
Or maybe you're looking at the plugin's code?

[Lazur]

That was copied from the source codes of the gallery's thumbnail page.
Thought you can write some parts to it, and add a viewbox to all svg-s globally that way.

[brynn]

That was copied from the source codes of the gallery's thumbnail page.
Thought you can write some parts to it, and add a viewbox to all svg-s globally that way.

As far as "globally" it seems to me like the approach should be through the plugin.  It looks to me like the plugin is very small, and written in php.  [Edit - Or at least they are PHP files.  Maybe it has some different code embedded?]  That's why I've been so hopeful we can find someone who can fix it.  CPG is an open source project, so there won't be any problems as far as copyright.  Attached are the 2 files which comprise the plugin.

I mean, I was just thinking this morning, that I might start looking into learning php.  I've managed to make the Inkscape Tutorials page in html, and still know very little about html. 

I don't know exactly what causes the SVG to be cropped.  Maybe what needs to happen is that a viewbox and maybe viewport needs to be added to the XML?  Or somehow, the cropping needs to be eliminated.

Ok, that does it!!  I'm off to learn as much as I can.  Maybe I can fix it myself?

Oh, but before I do that -- did you see this:  http://inkscapecommunity.com/ic_gallery/thumbnails.php?album=15
and this:  http://inkscapecommunity.com/ic_gallery/displayimage.php?album=18&pid=129#top_display_media

I added a viewBox attribute to the XML using a text editor.  It fixed the thumbnail display.  But I don't understand why the intermediate image is much larger than it should be.  Do you think I need to add a viewport attribute as well?

[Lazur]

Saw those.

To my experience the viewbox added to the svg causes that it is scaled to the 700*700 size, even if the original image was smaller than that.
Used a 5/5 sized svg but later deleted it.

With svg-s I don't think it would corrupt too much the uploader's idea about the image's measures.
In my opinion most cases it would be a better solution than having a small svg on the centre in 1:1.
 

Can't see any size restriction on that base code so have no idea how it would be different with using viewboxes, what part does it affect.
Not that I know coding or cpg.
I know a punk group called cpg, but that won't help.