SVG Support? about ap-image-zoom HOT 10 CLOSED

I have not testet my plugin with SVGs, but I can have a look at it!

from ap-image-zoom.

Totally assuming it worked with SVGs, I tried it with my own project. I encountered the following error in latest firefox, opera, and chromium:
(ap-image-zoom.js:91) Uncaught TypeError: Cannot read property 'data' of undefined
I tried it with a couple of vectors, same thing. This would be a really neat feature to get working, and I'd be happy to help you with it if you'd need anything. Thanks!

from ap-image-zoom.

What do you mean with vectors? Embedding the <svg> tag into your HTML file like the following?

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" fill="#f00" />
   Sorry, your browser does not support inline SVG.
</svg> 

from ap-image-zoom.

Please have a look at the svg-support branch. I implemented a basic vector support which means supporting <svg> elements. Is this what you want to have?

But I stumbled over two problems, I have with this feature:

1. Because I want my plugin not touching the original element (image oder SVG), a kind of clone is created while using ap-image-zoom. When using images, the plugin creates another image, using the image URL as src attribute. But when targeting a SVG, the plugin creates a clone right now. Here the problem of duplicated IDs occurs. Do you have any ideas about an workaround?
2. Webkit pixelates the visible image when zooming into SVG. That's why I'm not very happy with this feature at the moment. You can set the SVGs width and height to a (very) large value, but then the native width and height is distorted. So I thought about rendering the SVG to a canvas, but that's too much complexity, I think. Any ideas about this?

from ap-image-zoom.

Hi, sorry about the extremely late reply, but I have a good amount more time now than I did before, and am probably more available so we can get to work on this :).

1. Assuming the developer is only going to play with the new svg element (the one you clone), what we could do is completely remove the id attribute from the old svg and only give it to the new svg. Or maybe change the old svg's id to "[original id]_old" (something along those lines) and have the new svg just be the original id
2. In the stackoverflow question you linked, there is a new response which you might not have seen. If the developer is willing to export their svg to twice the original dimensions, in your plugin we could add the transform: scale(0.5); css property. Like my first response, it's not the best solution, but it certainly does work

Note that I haven't tried out the svg-support branch, but when I get home, I'll test it and report back findings.

from ap-image-zoom.

No problem ;) First of all, check the SVG branch. Perhaps most problems are solved there.

1. Right now I think I found the solution for the ID and clone problem -- I will implement it today. Imagine you have a <svg> which you want to zoom. My plugin creates another SVG which has a single child: a <use> tag. This tag references the original SVG. So, even if the original SVG is modified, the zoomed SVG is adjusted. What do you think about that?
2. I think, in combinition with 1., we can find a solution for the scaling problem?

Edit: I found the solution for the SVG problem. When using <use> tag, everything is fine. I even have a solution for the pixelation problem by using the transform attribute in the <use> tag. I think will pull a new branch this week. There are some bugs I have to fix before.

from ap-image-zoom.

I uploaded a buggy version of my new SVG idea. Have a look at the new branch svg-support-use-tag. It's completely rudimentary, but shows how it works.

The nice thing about this is, that when zooming in Webkit browsers, everything looks clear and not pixelated.

from ap-image-zoom.

I think your new method is great, although a couple of things come to mind:

1. IE 11 & Chrome 43 on Windows 8.1: auto-center doesn't center the image, it sticks it at the very top. Should be an easy fix, I just thought it was worth noting.

1. Firefox 39 on Ubuntu/Windows & Chrome 43 on Windows: Clicking the + and - zoom buttons is very slow (meaning it doesn't zoom in a whole lot) compared to IE with SVG-zooming and any browser with plain images on the master branch. Zooming with the mouse wheel seems to work just fine, however.

Other than that, the new branch seems to be just great! :)

from ap-image-zoom.

I updated the branch svg-support-use-tag right now. Please check the new version. When there are no bugs or further improvements, then this will be the final version for svg-support. Please tell me, what you think about that implementation.

1. I fixed your first bug. There was an error on calculating the height of <use>.
2. I do not have the same issue here. Everything works fine, when using the + and - buttons. I checked it in IE11, FF39, latest Chrome and latest Opera. It even works on my old HTC One X. What machine do you use? Do you disabled the hardware support?

Edit: I figured out an bug with IE11. I will fix it...

from ap-image-zoom.

I fixed that IE11 bug with latest version 2.0.1 now. Can you check that?

When you won't find any bugs, I will merge the svg-support-use-tag branch into master next week.

from ap-image-zoom.