9 Replies Latest reply on Oct 21, 2014 2:35 PM by pinkstonms

    Will Edge Support Vector Graphics

    pinkstonms

      I have created an interactive in edge that is a circle made up of 50 slices. As you mouse over each slice (all separate PNGs with MouseOver functions) it advances user down the timeline.... No Problem

       

      Here is where the problem lies because they are PNG and not Vector Objects the hare a retangular bounding box that starts to overlapp the button along side as you move around the circle.

       

      In the image below the white area is the area that should be activeted by a mouse over however because a bitmap and not vector moseover is activate even in the pink area whcih starts to overlap other buttons as can be seen in the full comp image..

       

      Hope this make sence. Anyone know of a workaround?

       

      key.jpgcirclegraph.png

        • 1. Re: Will Edge Support Vector Graphics
          sarhunt Adobe Employee

          Hey there, have you tried using SVG graphics instead of PNGs? Using your images as SVG will give you the scalability you're after.

           

          Sarah

          • 2. Re: Will Edge Support Vector Graphics
            pinkstonms Level 1

            Yes I first used SVG files  however found out they would not display on some servers that did not support SVG MIME type. There is a workaround I was given but have not yet tried it;

            But more importantly is how does Edge treat SVG files? I know it makes them scalable but will I have the same issue as I discribed above?

             

            In the pink and white image above the white area is the area that should be activated by a mouse over the STATE of WA and would be if the button was an object or vector however because it is a bitmap and not vector moseover is activate by entire image bounding box even in the pink area which starts to overlap other buttons when layed in the circle as can be seen in the full comp image..

             

            I guess I will have tor try it out to see.

             

            Thanks

            • 3. Re: Will Edge Support Vector Graphics
              pinkstonms Level 1

              Just swaped out PNGs for SVG and get the same result once you bring it into Edge it becomes Flat with rectangle bounding box.... bummer

              • 4. Re: Will Edge Support Vector Graphics
                pinkstonms Level 1

                zoom.jpg

                 

                This shows the "button"  for the state of Oregon, as you can see by the light red area the active button is a rectangle that overlaps the nearby buttons, if you go down far enough on MT you get Oregon results or high enough on WA you get Oregon results. In flash I would have used a vector object and would not have the bounding box issue. In Flash even if it was a bitmap I could break it apart and remove the light red area.

                • 5. Re: Will Edge Support Vector Graphics
                  pinkstonms Level 1

                  I am sure someone will ask if I tried SVG instead of PNG and yes made no difference. I can find now way around it. You need a button to be the exact shape of say the state of California however because it is a bitmap it has a rectangle bounding box. When used as a button for a roll over in Edge the active area is that rectangle so there are places where it overlaps onto Nevada.

                  Maybe someone has found a work around for this.

                  • 6. Re: Will Edge Support Vector Graphics
                    Yerbol Level 1

                    Hi, I have same problem, my Edge animate is not showing SVG files, who can help me?

                    • 7. Re: Will Edge Support Vector Graphics
                      resdesign Adobe Community Professional & MVP

                      For maps, I use edgeCommons for SVG and it works great. However if you are using 2014.1, it seems like edgeCommons is broken. I suppose Simon will have an update or Animate will make it so it works with edgeCommons.

                      If you are using 2014.0.1, it should work fine.

                      If you need I can post a sample.

                      • 8. Re: Will Edge Support Vector Graphics
                        Yerbol Level 1

                        I have found out that when I export SVG from Ai it works in the Edge Animate.

                        But when I generate assets in photoshop, photoshop generating the SVG files, also they can be viewed in the browsers, but somehow I cant view them in EDGE.

                        So, strange things happens - PS SVG's working in Browsers, Ai SVG's working everywhere. So, cant understand whether PS generates wrong SVG's or EDGE not supports PS's SVG files.

                        • 9. Re: Will Edge Support Vector Graphics
                          pinkstonms Level 1

                          I have found if the Photoshop image is made up of "smart graphics" they work but then they probably began as AI files so that probably doesn't help. Only way I have found to make it work is to code the buttons as maps. Never used Commons I will have to look into it. I do a lot of interactive maps of the USA and would like to find an easier way.