{
  "id": 2578855,
  "title": "Four things SVG and CSS did that I did not expect",
  "url": "https://urgent.news/2026/08/22/four-things-svg-and-css-did-that-i-did-not-expect",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-22T12:46:28.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/pop3_zxcv/four-things-svg-and-css-did-that-i-did-not-expect-4f4d"
  },
  "original_language": "en",
  "account": "During the development of an entirely browser-based icon editor (icons.jamuny.com), the writer encountered several unexpected challenges with SVG and CSS:\n\n1. Presentation attributes are overridden by author CSS rules in the cascade. The writer attempted to scale handle stroke widths by dividing 0.35 by the zoom factor and storing the result as a presentation attribute. However, a more specific CSS rule defined the stroke width, taking precedence even though the attribute value was never used.\n\n2. Geometry attributes in SVG, such as r and width, do not have CSS counterparts, so they are not affected by cascading rules. The writer found that the focus ring size measured in user units was affected by the zoom level, but this issue did not arise with other geometry attributes.\n\n3. The writer discovered that getComputedStyle() can retrieve presentation attribute values. While initially believing that var() does not work in presentation attributes, the writer later found that it does work. This insight allowed them to implement a theme-specific colour value using var() in attributes.\n\n4. Overlays with reduced transparency can compromise contrast ratios. To address this, the writer implemented a fixed lightness value as a theme token (0.52 for light themes and 0.74 for dark themes). This approach ensured that the contrast ratios remained within WCAG 1.4.11 requirements, even when changing the opacity of drawing commands.\n\nThe writer emphasizes the importance of testing claims directly in the browser, as test suites alone cannot guarantee that a solution will function correctly in all scenarios.",
  "summary": "I spent a while building an icon editor that runs entirely in the browser (icons.jamuny.com, free, no account). Here is what cost me the most time. A presentation attribute loses to any author CSS rule I was scaling handle stroke widths by 1 / zoom and writing the result as an attribute. The value was never used. handle . setAttribute ( ' stroke-width ' , String ( 0.35 / zoom )); .handle {…",
  "key_points": [
    "Presentation attributes overridden by CSS rules in cascade",
    "Geometry attributes lack CSS counterparts, unaffected by cascading",
    "getComputedStyle() retrieves presentation attribute values"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}