Blurry texture with svg

Questions
1

Hello,

I am trying to apply svg image as texture.

Actually this question might not related to three js. But still anyone can help me with that here.

I am converting ai file to svg from 1) adobe illustrator 2) photopea online tool

When I am using photopea svg I am not getting blurry effect, but when I use svg exported from adobe illustrator I am getting blurry issue like below

image
image480×501 58.3 KB

svgs.zip (107.4 KB)

2

In most cases, it’s best to convert vector graphics to raster images offline. Try PNG export from Illustrator for example. Then you know what resolution you’re getting in three.js.

Unless there’s some reason you need this to be kept in SVG format and converted to an image at runtime? If so, the reasons, and how you’re loading the SVG now, might be relevant to how you should approach improving the blurriness, if you could share those details.

3

Hi! The svg from illustrator has nor width and height attributes. Therefore a browser rasterizes it with the default width and height, and creates a textuire wich is too small and it has to be stretched when rendering.

image
image602×272 18.9 KB

You can manually add these attributes to the svg code.