Hello,
I’m a new Hype user, and I’m importing graphics in SVG format from Illustrator for animations.
Now how can I remove the “invisible square” in Hype? i.e. if I draw elements on a map the "squares"
of each element will overlap while clicking.
Thanks a lot in advance
Unrelated, but if you’re exporting SVG graphics from Illustrator, these will need optimising.
Try something like: http://petercollingridge.appspot.com/svg-optimiser
To strip out the junk Illustrator adds to exports.
This should dramatically reduce the size of the SVG - but check that you’ve not disabled some styling options that might make the illustration look as you intended. For example, I am using rounded endpoints, and tick the ‘remove non-essential styles’ off, as otherwise those endpoints are removed.
Save the clean SVG file.
I can’t give you a full and proper answer on your main question as I’m still learning Hype myself. I typically just tweak the size as needed. If you find the SVG scaling, you might want to set the height and width of the SVG in a text file - and typically match these settings to the same as the viewport numbers. Such as:
<svg xmlns="http://www.w3.org/2000/svg" width="116" height="159" viewBox="0 0 116 159">
Hope this helps you a little.
Found a great intro and deeper dive to SVG while learning it.
Also using Sketch to export your svgs is helpful as well.
or use
SVG-edit this may help to clean out any artifacts you have.
http://svg.recitmst.qc.ca/
Hype click events will work on Hype containers (i.e. your invisible squares).
If you want to have click events that work on the SVG shape(s) inside this container then you will need to build click event handers into the SVG itself.
This thread show how to do this : Problem with SVG
or just give the SVG an ID and use that in a HYPE function