For that reason, solving this issue is only possible by either: Unfortunately, the latest version of Sketch doesn’t offer many options for exporting vector-based icons. I tried exporting the same image from Adobe Illustrator to compare, and found that the Sketch export had far more lines and a more complex structure. Sketch was exporting the icons exactly as they were within the Sketch files themselves, complete with their mask, colour, and size properties. It took a bit of digging and a splash of code debugging, but I figured out the problem. But when I started actually using these SVG icons (exported from Sketch) on web pages, I noticed that they looked blurry in mobile view. I thought I was doing the right thing by using vector-based images for my icons, so that they’d look crisp and clear on any device and in any size. I ran into an issue when I was working on a project. However, this versatility is what can cause problems when it comes to SVG quality because it introduces a lot of complexity to the exported file, leading to larger file sizes and more complicated code for mobile devices to render smoothly. This method lets you adjust the icon's colour easily across the design file in different artboards and pages. A colour symbol layer that’s masked by the masking layer.If you’re like me and want as much flexibility as possible in your Sketch files, your icons are probably symbols with colour masking applied. It’s full of tips and advice on web accessibility for designers and front-end developers. Read next: Our free web accessibility ebook. SVG images are nothing more than plain text files that can be manipulated easily with JavaScript or CSS.īecause of its flexibility, the format has become quite popular it’s still the only image format that responds to current web development demands of: Their major advantage is that they can be resized without losing resolution, unlike other formats such as JPEG or PNG.īy 2017, all modern web browsers were able to render SVGs, and most vector drawing programs supported exporting files in the SVG format. This particular vector graphic format is based on XML and is used to display a variety of graphics on the Web and other environments.
I found out that the method you use to export the file and the way your file is used during the front-end stage are important factors in determining the quality of your SVGs.īefore we take a closer look at what’s going on, let’s do a quick review of what SVGs are. I ran into this issue myself while working in Sketch, so I decided to investigate. SVG images can’t be blurry, right? Turns out that in some cases, they can.
0 kommentar(er)
