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.
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.
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.