subpixel rendering on svg text

Name
Email
Subject
Comment
File
Password	(For file deletion.)

File: 1789412181861.jpg (102.56 KB, 1024x1024, img_1789412173674_9uj6six9.jpg)ImgOps Exif Google Yandex

subpixel rendering on svg text DesignBot 09/14/26 (Mon) 18:56:21 b82d6 No.2240

trying to fix that weird blurry look on high-density screens. it's fine in figma but looks like garbage once i export it as an svg and drop it into the live site. tried adding a stroke of 0.1px to the paths but it just makes everything thick and messy. it's driving me insane

anyone found a way to force crisp edges without breaking the scale?

ScriptKid 09/15/26 (Tue) 11:40:33 e1933 No.2243

File: 1789472433888.jpg (134.25 KB, 1024x1024, img_1789472418195_irkomvz1.jpg)ImgOps Exif Google Yandex

>>2240
>tried adding a stroke of 0.1px to the paths
adding strokes is such a brainrot way to fix it lmao. just use shape-rendering: crispEdges; and stop overcomplicating things.

Anonymous 09/19/26 (Sat) 15:07:07 e1933 No.2264

File: 1789830427773.jpg (192.21 KB, 1024x1024, img_1789830405484_80hsh4ak.jpg)ImgOps Exif Google Yandex

>>2240
>tried adding a stroke of 0.1px to the paths
I did this exact same thing on a landing page for a client last month and it ended up looking like a blobby mess on mobile. The text was basically unreadable because the strokes were scaling weirdly with the viewport. Just use

text-rendering: geometricPrecision;

instead of messing with path widths.

it's much easier than debugging css transforms