In the center, the scaled plus with a circle around it is an svg. Why is it so blurry? What am I doing wrong?
Thank You
You can resize SVGs by dragging a corner instead of using the scale command. Scaling an SVG will cause rending problems.
Here’s an example, where the image is dragged directly onto the scene: mail.zip (15.4 KB)
Your SVG file shouldn’t have a ‘viewbox’, which will limit its ability to be resized. You can use this tool to remove it: https://jakearchibald.github.io/svgomg/
1 Like
thank you
I have a problem with an SVG image being blurred in the browsers and also exporting it to video.
The image is created in Affinity Designer (same as my logo) and exported as SVG. When I import it in Hype it appears with a very small size. I scale it using the corner handles. In Hype the image looks perfect,
And in Firefox even more...
I used the web app that Daniel recommends in this post, but it's still blurry.
What am I doing wrong?
Here I leave you the Hype file:
LOGO IDYL_ANIMADO.hype.zip (374,1 KB)
I just found out what was going on.
First I imported the image as a PNG file, with the same name.
When I saw that it was blurry, I imported the SVG image and scaled it as I said before. Then I deleted the PNG image from the scene, but not from the library.
Now I checked the library and saw the PNG file in it. I thought maybe the problem was there. I replaced it with the PNG file and... Voila! 
It works. Now it looks perfect in search engines and video export.
So it looks like Hype was keeping the information from the PNG file instead of the SVG file.
Mystery solved.
Hmmm, don´t know really, what you´re doing with the SVG... Somehow there is a reference to a png version of the svg... I would never reference to an svg as a picture. Better: Open the svg in a text editor, copy the code, place a rectangle in Hype and paste the code into the inner HTML of the rectangle. Works perfect for me, as well in Safari as in Firefox...
LOGO IDYL_ANIMADO_2.zip (59.7 KB)
1 Like
I did see the SVG look blurry. If you hit this again, you can fix by using regular resizing of the element instead of scaling. The SVG will expand naturally to fit its container.
1 Like