SVG support in the gallery

[brynn]

Hi Friends,
As you may have noticed, we are able to upload SVG files to the gallery.  But there's an issue with the display.

• Please see attached icss1.png to compare starfire.png with starfire.svg.  You can see that the SVG thumbnail somehow is being cropped off.
• That thumbnail should be "clickable" and take viewer to the intermediate page (as it's called).  Please see attached icss2.png.  The area inside the pink dashed square is where it should be clickable, but isn't.  And instead, the areas to the left and right, outlined in green dashed rectangles, is where you can actually click.
• When you do get to the intermediate page, attached icss3.png shows an issue there as well.  You can see that somehow the gallery thinks the image is several times its actual size.  The graphic itself is the proper size, but there's all that extra....I'm assuming transparent area (rather than white).

SVG support for CPG comes via an old and little used plugin called SVG Support:  http://sourceforge.net/p/coppermine/code/HEAD/tree/branches/cpg1.5.x/plugins/svg_support.

Unfortunately, I've just learned that it appears that no one there is interested in updating this plugin, to fix these display issues.....at least currently.  Someone may come along someday, and want to fix it.  http://sourceforge.net/p/coppermine/code/HEAD/tree/branches/cpg1.5.x/plugins/

So I wanted to put out a call here, for anyone who may have skills with PHP who might be interested in fixing this plugin.  Since CPG is an open source project, there won't be a problem if we do manage to fix it.  And of course we would want to provide the updated files to that project, should we be able to fix it.

If anyone is interested, please reply   

______________

Should some time pass, and we can't fix this, I'll have to decide whether to keep the plugin, or uninstall it.  But I'm mostly on the fence about it.  Can we put up with this annoying display, so that at least we have the ability to upload SVG files?  Or is it such a "black eye" visually, that it detracts from the enjoyment of the gallery?  Is the display so annoying that I should uninstall it, and stick with primarily PNGs?

If anyone has any opinions about that, I'd appreciate hearing them.  I probably lean slightly more towards uninstalling it, if it can't be fixed.  But really, I could go either way.  What do you all think?

[Inkspots]

It looks to me as though no thumbnail of the svg is actually created.
Instead, a png copy of the full sized image is merely cropped from the top left left corner so that the
image piece fits into the thumbnail display area at the max thumbnail size.

My Vote:
Please don't uninstall the svg plugin.
SVG support of any kind in forums and Artists Galleries is too rare, and is unlikely to become more common if no one ever uses it.
As a community focused on Inkscape use, and sharing Inkscape knowledge, creation and fun how can we possibly do without svg upload?
The odd display IS annoying, but not being able to post and use our beautiful, clear, svg drawings would be worse.
I can live with Ugly thumbnail views if I must, so long as the svg image itself can be accessed.

Is there a way to alter the plugin so that we can provide our own png thumbnails for Svg images?
that might solve at least a part of the problem. I'm not at all familiar with php, so unfortunately I lack the skills to do that.

[brynn]

Thanks for your comments about keeping the plugin.  That's a good point.  I'm really hoping one of our Inkscape friends will have the skills to fix it.

I really know so very little about this.  But when I look at the html of the page, I don't see any evidence that it's substituting a PNG for the thumbnail.  The plugin would have to have to ability to export a PNG from the SVG (like Inkscape does) and I seriously doubt it can do that.  I think that really is the SVG.  Oh yeah, I just zoomed my browser to 200% and that SVG image does not pixelate, while the whole rest of the page does.  So I think that IS the SVG.

When I'm looking at the html for that page, I see that the SVG is wrapped in object tags.  That may or may not be absolutely required.  There may be another tag or 2 that might work instead.  I'll have to read the Inkscape manual, because it does have a lot to say about putting SVGs on the internet.  But what catches my attention, is that the object tags are enclosed in div tags.  None of the other images (mostly PNGs) are wrapped in div tags.  I'd like to try removing the div tags and see what happens.  I know how to edit the html.  But I don't know what to do with it, to make it display properly.  Somehow it needs to be loaded into some of the rest of the gallery's codes, to make it work.  It won't display by itself, in my browser.

But even though I recognize some parts of the html, I would not have a clue how to write php files, which is what it looks like the plugin is made with.

But keep the faith -- I know there are some awfully talented Inkscapers out there (I mean talented  in other things besides just Inkscape).

[Inkspots]

Yes, you are right, scrolling doesnt pixelate the thumbnail, so maybe its just a crop of the fullsized svg.
I dont know how this thumbnail issue can be dealt with, but sites like open clipart.org have lovely thumbnails for svgs, and a nice page display, so it must be possible.

[brynn]

Oh yes, definitely it's possible.  And since CPG is an open source project, it's just a matter of finding someone with the right sklills who is willing to do it.

I'm not sure, but it still seems to me it could be a fairly simple fix.

I have no idea how OCL creates its thumbnails.  Perhaps they require the artist to provide it?  Or maybe they somehow use Inkscape, or parts of Inkscape, to export it automatically?  I really have no idea.  And doesn't deviantART also display SVGs?

I think what would need to happen for the thumbnail, is that the SVG would somehow need to be given the specific size of the thumbnail.  As a vector image, it won't be affected by changing its size, so that seems to me to be rather simple.  Maybe it's nothing more than giving the object tag specific dimentions.  Not that I know whether that's possible.  Or maybe the div that encloses it?  But somehow, it needs to fit within the available space for thumbnails.  And I think it's the object tag that creates the "frame".

I haven't even looked at the.....well, I've been calling it the image's own page.  CPG calls it the "intermediate image".  Maybe "the page with the file info"??  Anyway, I haven't looked at the html for that page yet.  Mostly because I'll never be able to write the code for the plugin anyway.  With some study, I may well figure out how to write the html to make it work.  But I won't ever be able to write the php for the plugin (or whatever it's written with).

But give it some time!  I know there are Inkscapers with skills like this, who may be able to fix it for us.

[brynn]

Update:

I just found out that this SVG plugin isn't required to upload SVGs.  SVGs can be uploaded without it.   Apparently the role of the plugin is to create the thumbnail and intermediate display.  I'm looking into another plugin which would allow us to upload a custom thumb and intermed, but am waiting for help in the CPG forum as it seems to be malfunctioning too   

Anyway, still working on getting better SVG display in the gallery 

[brynn]

Ok folks, finally a more definitive update.

A few weeks ago, I found out that the faulty Coppermine SVG plugin is not required to upload SVGs.  Apparently the entire purpose of the SVG plugin is to create and display the thumbnail and intermediate images.  But it malfunctions in 2 ways.  1 - It crops the image to fit the thumbnail dimensions, so that you don't see all of any image larger than the thumbnail dimensions (128 px).  And 2 - It somehow messes up the gallery's navigation system.  Normally, we click on a thumbnail, to go to an intermediate page (which contains an intermediate size image and all the file info), and then click on the intermediate, to get the full size (in a new window).  But with the SVG plugin installed, we had to click not on, but in the white space beside the thumb or intermed, to navigate.

Without the SVG plugin installed, we don't have any thumbnails or intermediate images, although the file info on the intermed page is still shown, and the full size image is still available.  Instead, the gallery provides a very bland, grayscale image, by default, that I think looks like a transparent cube.  But also without the plugin, we have normal navigation of the gallery.  I'll try to make a simple chart below, to simplify all this.  I know it will be hard for some of you to understand (it's taken me months, lol).

So anyway, once I realized, and understood the situation, I immediately thought of a different plugin, called Custom Thumbnails.  It's designed to allow a custom thumbnail to be uploaded for videos, which otherwise acquire a standard default thumbnail (which makes for an ugly thumbnail page in an album with more than 1 video).  But it can be used to create a custom thumbnail (and intermediate) for any uploaded file.

So I set out to investigate that plugin.  Turns out, it had a problem when SVG was the filetype (rather than video or other).  Folks at the CPG (Coppermine) forum gave me some code fixes for that (since it's primarily a photo album, i.e. raster) (afaik, we're the only CPG users who currently need SVG support  ).  So now, we are able to upload SVGs, and using the Custom Thumbnail button (on the intermediate page, right beside "Delete this file" button, in my theme) upload a custom thumbnail and intermediate for it.

The only remaining issue, is that for 1 PNG I've uploaded as a custom thumbnail (in my tests) its transparent background is displayed as black.  It doesn't seem to always happen, but it did in this one case.  And the folks at CPG forum are helping me to investigate.  But I think it will be a fairly uncommon result, even if it can't be fixed.

____________

Meanwhile, and ironically, within hours of discovering that SVGs could be uploaded without using the plugin, someone contacted me by email, about the plugin issue.  I would credit them, except that they haven't even reg'd at IC, so maybe they don't want the public credit.  Anyway, they made some preliminary edits to the original SVG plugin.  It fixed some problems, but created others.

It got rid of the cropping effect (of both thumbs and intermeds).  And it partially fixed the navigation issue.  With this revised SVG plugin, you could click on the thumbnail, to go to the intermediate image.  But there was no clicking on the intermed to get to the full size.  So easy access to view the full size SVG was lost.  Another problem, was that only square or nearly square images were displayed properly, as either thumb or intermed.  The further away from square dimensions of an image, the more distorted its thumbnail and intermediate were, despite the fact they were still SVG.

After reporting the results, and upon further discussion (with this person who volunteered to try to fix the plugin), it became apparent that fixing this faulty SVG plugin is NOT going to be a simple or easy task!  In fact, it seems to me like it would be easier for someone to create a whole new gallery software, designed to handle SVGs primarily (and raster secondary) than try to wedge the functionality needed for SVG into the CPG (which is primarily for photos) software.  We can get into the details why I think this, in subsequent replies.  But I want to get to the point I'm trying to make, in this message.

____________

So that point is, that we, and mostly I, have a decision to make.  Do we keep limping along with the faulty SVG plugin?  I was fine with limping along, as long as I thought fixing it would be fairly simple.  Or do we forget the SVG plugin, and use the Custom Thumbnail plugin?  At first, I was thinking the Custom Thumbnail plugin was going to be better than the SVG plugin, at least until the SVG plugin could be fixed.  But now that I realize it's not going to be a simple fix, I have to decide which plugin to use.

Hhmm...time out!  I wonder what would happen if we use both?  Since I'm waiting for support in the CPG forum, I don't want to reinstall the SVG plugin, at the moment.  But it seems like a worthwhile test to have both plugins installed, and try the custom thumbnail on the SVG which was installed with SVG plugin.  So there's a chance that might be a 3rd option.

Let's see if I can create a little chart, that simplifies all the options.  I'll put it in a new reply, so discussion can start on this already (since Lazur posted a shout about this, earlier today).

Questions/comments welcome 

[Lazur]

I can't think other than the viewbox.
If it was added to svg-s with the original plugin being active, everything was fine except for the thumbnails and intermed images click-ability.
From the outside view it doesn't seems complicated, with a simple IF cycle, to add viewbox to all svg-s displayed.
IF viewbox is not defined, then copypaste the image's dimensions and add a viewbox line to the svg,
ELSE no action.

With clickability, would it be a big hack, to define the action location by area istead of displayed element -below?
The original intermediate image display used frame, there may be something similar?

[brynn]

Ok, here's a little chart.  I've added a 3rd category, in light of Lazur's comments.  And after I get through with help topic in CPG support, I'll test using both plugins together, and if I get any helpful results, then I'll add a 4th category.

Comparing SVG plugin to Custom Thumbnail plugin to SVG plugin with viewBox attribute

original SVG plugin alone

advantages	disadvantages
none, that I can see	1 - cropped display of thumbnail and intermediate 2 - poor navigation

Custom Thumbnail plugin alone

advantages	disadvantages
1 - displays full size easily 2 - correct navigation 3 - correct thumbnail 4 - correct intermediate	1 - extra step to upload PNG

SVG plugin with viewBox attribute

advantages	disadvantages
correct thumbnail	1 - poor navigation 2 - no easy access to full size 3 - no intermediate size at all 4 - unless a plugin is written to automate it, it's an extra step to add viewBox attribute in text editor

Ok, sorry I couldn't make those 3 options nicely spaced horizontally, but I just don't have the patience with this !!#*!$#%!! editor, today.  But at least it's an organized overview of the situation.

Re Lazur's reply.  I don't know what "IF cycle" is.  But it sounds like a script could easily be written to add the viewBox automatically.  The problem I see with that, is that we can't easily click through to view the full size.  The only way to access the full size, with viewBox, is to know enough about the internet, to know how to retrieve the URL.  And a lot of the users who may eventually start using the gallery, may not know how to do that.

And since the primary goal of a gallery is to display images, that seems like a long way around to view an image.  And also, without that clickability, the number of views statistic won't work.  As far as that statistic, no SVG images would ever have any views counted.

According to the person who tried to fix the plugin, even with what sounds like a relatively simple thing, to write a script to add the viewBox, that only provides the thumbnail.  The intermediate image will requires the SVG be changed to PNG, which PHP can't do.  They think ImageMagick can do that, which I do have on my server, but they still don't think the results would be very good.  And even in such a frame as Lazur mentioned, the image still gets cropped to the frame - it just a slightly larger frame.

So that's why I think it will be easier for someone to code a whole new gallery software, designed to handle primarily SVG, and ideally, other vector formats, primarily (with raster being just secondary); than to try and wedge such capability into CPG.  Although I have very little technical knowledge and would love to be proven wrong, lol.

But Lazur, if you can find a way to create the thumbnail with viewBox, intermediate in whatever way, AND make them clickable, that would fix the plugin, and then it would just have to be written in PHP.  And I would LOVE it if that could happen!

Short of that happening, I think SVG support in the gallery will function best, by using the Custom Thumbnail plugin.  I know it's an extra step for members, to upload the 2nd image.  But within the current confines of Coppermine, I think it's the best we can do.  Although it's still up for discussion, and I'd be glad to hear any and all thoughts, comments, opinions, etc.

And btw, if anyone knows of any gallery wares which can handle SVG, (and ideally play nice with SMF) I would love to know about it.  I did test out an SMF gallery mod, that does handle SVG beautifully!  (can't think of it's name at the moment)  However, it only allows 1, 3 or 5 images to be displayed per page, vertically only, no thumbnails, no display of file info, no albums, no stats.  Even confined to Coppermine, we are better off.  But if there are others out there, please let me know!

Ok, so I hope I don't sound short tempered and final about all this.  I have a lot going on today, and I'm trying to squeeze it all in.  I'm still totally open to discussion, and especially if anyone has any new info to add to this discussion.  What I want more than anything for this website, is to have a gallery that best promotes SVG and SVG students and artists.  And whatever can be done towards this end, I'm in favor of, and will consider.  If anyone has any info to contribute, please don't hesitate 

[brynn]

Ok, so we finally got the kinks worked out of the Custom Thumbnail plugin.  It seems to be working flawlessly now.

So for the time being, unless someone volunteers to make a major rewrite of the SVG plugin, or can refer me to a gallery software which handles SVG very well, we'll be using no SVG plugin, and to create thumbnails and intermediate images, we'll use the Custom Thumbnail plugin.

Here's how to upload SVGs (and I'll edit the gallery instructions as soon as I finish this).

• Upload the SVG normally.  Instead of seeing the image at the thumbnail size and intermediate size, you'll see rather ugly and entirely boring default image (sort of transparent box).  But you can still click on those, and get to the full size SVG.
• To create nice thumbnails and intermediate images, go to the intermediate page (the one with all the file info) (it's the same page that comes up after you upload the SVG).  Click on the Custom Thumbnail button.
• Using the dialog that comes up, click Browse button, and select whatever image you want to represent your SVG.  Ideally, this will be an exported PNG.
• Be sure to check the box for intermediate image, if you want one.  For a nice looking album and gallery, I would recommend using it.
• Click Upload button.
• Done -- now you have a gorgeous thumbnail and intermediate image, to go with your SVG!                 

[brynn]

Marking this topic solved, for now.  But if anyone is interested in re-writing the CPG plug-in, as explained above (and in the other topic) please don't hesitate to contact me