nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Blurry svg client-side rendered icons

sarahjones4

Hi All,

First time using ArcGIS, having used GM for the past 10 years, and have run into an issue.

I have 50+ detailed svgs that when rendered on GM are crisp and clean, but when same are rendered on the canvas (ArcGIS JS client-sided) they are blurry. Even a plain circle is being distorted with a 1 pixel right/bottom crop.

I note that since version 4.11 (here), a "soft, anti-aliased edges" has been added, which I am surmising is causing the issue, and if that is the case... how do you turn it off?!

Find more posts tagged with

Accepted answers

All comments

AnneFitz

We've installed a fix for the blurriness that will be released at version 4.28. You can test it out on our development version of the API, https://js.arcgis.com/next. Please let us know if you are still running into issues!

AnneFitz

Thanks for the additional info @AndrewTaylor0942 ! I can see there is some blurriness -- we will take a look!

In the meantime, you can try converting your complex SVGs to CIM symbols using the CIM Symbol Builder. Here's a blog that walks you through how to do this: https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/upload-symbols-from-svg-in-the-updated-cim-symbol-builder/

Let me know if that works for you or if you have any questions! 🙂

AndrewTaylor0942

Unfortunately I can't save code pens at work, but I'm pulling in the SVG as a file, not a path for a simple marker. We have some complex svgs we'd like to use and can't just paste in one path. The blur is subtle, but noticable. In the attached picture the green is made using a simple marker, the red is with a file path to an actual svg image.

            const markerSymbol = {
                type: 'simple-marker',
                path: 'M11.2022 0.909049L11.0265 0.733313H10.7779H5.22238H4.97386L4.79812 0.909049L0.909232 4.79794L0.733496 4.97367V5.2222V10.7778V11.0263L0.909232 11.202L4.79812 15.0909L4.97386 15.2666H5.22238H10.7779H11.0265L11.2022 15.0909L15.0911 11.202L15.2668 11.0263V10.7778V5.2222V4.97367L15.0911 4.79794L11.2022 0.909049Z',
                color: 'red',
                size: 14,
                outline: {
                    type: 'simple-line',
                    color: 'white',
                    width: 1.2
                }
            };

            const svgStopSign = {
                type: 'picture-marker',
                url: '/path/to/file.svg,
                height: 14,
                width: 14
            }

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
    <path d="M22.2625 1.95958L21.9696 1.66669H21.5554H10.4443H10.0301L9.73717 1.95958L1.9594 9.73736L1.6665 10.0303V10.4445V21.5556V21.9698L1.9594 22.2627L9.73717 30.0405L10.0301 30.3334H10.4443H21.5554H21.9696L22.2625 30.0405L30.0403 22.2627L30.3332 21.9698V21.5556V10.4445V10.0303L30.0403 9.73736L22.2625 1.95958Z" fill="#E52A2D" stroke="white" stroke-width="2"/>
</svg>

Screenshot 2023-08-17 at 10.54.32 AM.png

AnneFitz

Hi @AndrewTaylor0942 - can you share a codepen or something reproducing the issue? I tested out your SVG using a SimpleMarkerSymbol and do not notice any blurriness.

Screenshot 2023-08-03 at 4.37.07 PM.png

Here's an example: https://codepen.io/annefitz/pen/poQYvwJ?editors=1000

AndrewTaylor0942

Was there a solution to this problem? I'm on the latest javascript SDKs and my svgs are render blurry. The height and width match what is set in the SVG itself, but it's blurry.

Screenshot 2023-06-20 at 10.47.15 AM.png

<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.707639 6.50388C0.531958 6.81132 0.531958 7.18874 0.70764 7.49618L3.42192 12.2461C3.59996 12.5576 3.9313 12.7499 4.29016 12.7499H9.70984C10.0687 12.7499 10.4 12.5576 10.5781 12.2461L13.2924 7.49618C13.468 7.18874 13.468 6.81132 13.2924 6.50388L10.5781 1.75398C10.4 1.4424 10.0687 1.25012 9.70984 1.25012H4.29016C3.9313 1.25012 3.59996 1.44241 3.42192 1.75398L0.707639 6.50388Z" fill="#E52A2D" stroke="white"/>
</svg>

sarahjones4

Hi @AnN , i'm using the latest JS. Whilst i cant provide a repo, I can show an image to explain.
The image on left is an SVG rendered normally, whilst the right is rendered as a graphic on the canvas.

Note the height is 2px smaller, and the paths/lines are fuzzy (aka blurry) and not crisp.. which i'm attributing to the 'anti-aliasing' being applied?

This svg is composed of 4 lines: 2 horizontal, 2 vertical, forming a "box/square", but is rendered like this.

Obviously the browser needs to sub-sample when path/lines/rect etc are using decimals. Canvas element rendering can be controlled through

image-rendering: pixelated; image-rendering: crisp-edges;

so how does one do same for ArcGIS JS 'picture-marker' graphic objects?

AnneFitz

Hi - what version of the ArcGIS API for JavaScript are you using? Could you share a repro case with me?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.