4

I'm facing a problem that I thought would have been easier to solve than it actually is.

I want to create a puzzle with 4860 pieces for a game. The mesh of the puzzle is made with SVG. Below I'm reporting part of the code, just to give you an idea. The code is working as you can see in the last link I gave you.

I created in defs a list of paths (18 in total), then a long list of 4860 so that I can make my puzzle. When the mouse moves over one piece, I want this piece to be highlighted. That's the code (first part), followed by a series of tags like the one in the example.

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" width="1200" height="1200" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
      <defs>
          <style type="text/css">
            .use1 {
                stroke: #000000;
                fill: #ffffff;
                fill-opacity: 0.1;
                stroke-linecap: butt;
            }
            .use1:hover {
                fill: #ffffff;
                fill-opacity: 0.8;
                stroke: #3273BE;
                stroke-width: 10;
                }
            .base {
                     }

          </style>

      <path id="a0" d="m152.199493 121.414993c-0.349991 2.4 -0.3 4.8 0 7.169998c1.200012 8.3 6.6 15.9 16.3 17.419998c12.858994 2 14 -5.5 23.2 . (...) "/>
      .... the other 17 paths .....
</defs>
<image x="0" y="0" width="1200" height="720" xlink:href="lana-del-rey-ultraviolence-recensione.jpg" />

<use xlink:href="#C5" x="-50" y="-50" transform="scale(0.088) rotate(0)" class="use1" id="1"/>
....
... x 4860 ....
....
</svg>

You can see the result here: http://www.ridiesorridi.it/puzzle/17.svg

If you open it in Safari or IE it works PERFECTLY with no lag. If you open in Chrome or Firefox to highlight a piece it's extremely slow. You can imagine when I put this SVG inside an HTML page ... !! Instead in IE and Safari it keeps working great.

My question is: how can I solve this problem with Chrome and Firefox? I've already tried to remove extra decimals (to "optimize svg") but it didn't work.

Edit I noticed that in Chrome and Firefox, if I zoom in (like 400%) it works PERFECTLY. Once it has all the elements together, it keeps having problems (compared to IE and Safari)

1 Answer 1

2

Reducing accuracy would only help parsing speed. Once the SVG was parsed, it shouldn't make a difference.

I am not sure what, if any, optimisations FF and Chrome use when testing hover for SVG elements. But I would certainly try reducing the complexity of the pieces. For instance, the piece "g1" has 89 path commands in its definition. You should be able to reduce that by 4x, at least, and still get an accurate jigsaw piece shape.

9
  • Thanks for the reply. I'm gonna try it now. I'll report the results of experiment.
    – 70ny
    Nov 21, 2014 at 12:55
  • I've tried, but still the same. I've reduced the svg, editing each single node manually. As you can see, in IE and Safari works perfect, in Chrome and Firefox not the same. I found out one thing: if in Chrome I zoom (400%) it works PERFECTLY like IE but, of course, I see just a little part of elements. Any other idea?
    – 70ny
    Nov 21, 2014 at 14:58
  • Try dividing the <use> elements into groups. For example, one <g> per row. That may allow the browser to eliminate whole rows at a time by testing against the group bbox first. Nov 21, 2014 at 22:08
  • Paul, thanks again for your reply, but it's still the same. I've tried to put a g for each row, then a g was half of a row, finally a g for each use (that's the version you can find in the link). Still the same in all 3 cases ... :(
    – 70ny
    Nov 22, 2014 at 0:32
  • 1
    The info in that referred bug is internal implementation discussion by the FF devs. There is nothing there that can help you right now. Nov 23, 2014 at 6:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.