Skip to content

SVG rendering gaps: data-URI raster images, gradients, and inline SVG in paragraph flow #130

@carlos7ags

Description

@carlos7ags

Reported by @enquora in #126 via a set of Apache-2.0 licensed stress test files.

Three SVG rendering gaps surfaced in svg.html. Filing together because they all live in or adjacent to the SVG subsystem and a single engineering pass will likely cover them.

Gap 1 — raster <image> via data URI not drawn (Test 2)

An <image> element inside an <svg> whose href/xlink:href is a data:image/png;base64,... URI does not render. Browsers embed the decoded raster into the SVG rendering.

Gap 2 — linearGradient and radialGradient render as solid fills (Test 5)

Shapes filled with url(#id) referencing a <linearGradient> or <radialGradient> render with a solid color (appears to pick one of the gradient stops) instead of an interpolated gradient.

Repro (abbreviated):

<svg width="200" height="80">
  <defs>
    <linearGradient id="g1" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#0f172a"/>
      <stop offset="1" stop-color="#0d9488"/>
    </linearGradient>
  </defs>
  <rect width="200" height="80" fill="url(#g1)"/>
</svg>

Expected: horizontal dark→teal gradient across the rect.
Actual: flat solid fill.

Gap 3 — inline <svg> inside a paragraph is dropped (Test 6)

An <svg> placed inline inside a <p> (small icon between words) is not rendered at all — the text renders but the icon disappears from the baseline flow.

Repro:

<p>This paragraph contains text before the SVG element,
   then an inline SVG icon <svg width="12" height="12">...</svg>
   and then text continues after it.</p>

Expected: 12×12 icon aligned to text baseline, flowing between the surrounding words.
Actual: the <svg> is silently dropped from the paragraph.

Acceptance

  • SVG <image> with href="data:image/png;base64,..." decodes and draws the raster at the element's position/size.
  • linearGradient and radialGradient referenced via fill="url(#id)" produce interpolated gradients honoring stops, gradientUnits, and transforms.
  • Inline <svg> elements inside <p> / other inline flow render at their declared size and participate in line-box layout at the text baseline.
  • Test cases added in the svg and/or html packages.

Related: #126

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions