SVG Referencing

The problem

<mask id="a">...</mask>
<path mask="url(#a)"/>

If we mash-up content…

<mask id="a">...</mask>
<path mask="url(#a)"/>

<mask id="a">...</mask>
<path mask="url(#a)"/>

What you really want…

<mask id="b0d47c5c-b0cb-4542-8fdd-e8ba4919a35d"></mask>
<path mask="url(#b0d47c5c-b0cb-4542-8fdd-e8ba4919a35d)"/>

<mask id="7fd2bc84-afb5-42be-8952-8c8a5797960d"></mask>
<path mask="url(#7fd2bc84-afb5-42be-8952-8c8a5797960d)"/>

Bad news…

• ↓ Readability
• ↑ File size
• Overhead for generating script
• Relationship path ↔ mask isn't intuitive

“The answer”

<path>
  <mask>...</mask>
</path>

• No IDs!
• Clear relationship path ↔ mask

But existing content…

<g>
  <mask id="a">...</mask>
  <rect/> <--Masked!-->
</g>
<path mask="url(#a)"/>

child keyword to rescue…

<path mask="child">
  <mask>...</mask>
</path>

If we have two eligible children…

• Take the last child (à la <feComponentTransfer>)

<path mask="child">
  <mask>...</mask>
  <mask>...</mask> <-- winner! -->
</path>

Where else?

<path clip-path="child">
  <clipPath>...</clipPath>
</path>

<path filter="child">
  <filter>...</filter>
</path>

Paint servers

<path fill="child">
  <linearGradient>...</linearGradient>
</path>

• <linearGradient>, <radialGradient>, or <pattern>

What about…

<path fill="child" stroke="child">
  <linearGradient>...</linearGradient>
  <linearGradient>...</linearGradient>
</path>

Proposal A: child(n)

<path fill="child(0)" stroke="child">
  <linearGradient>...</linearGradient>
  <linearGradient>...</linearGradient>
</path>

If we add new paint servers…

<path fill="child(0)">
  <meshGradient>...</meshGradient>
  <linearGradient>...</linearGradient>
</path>

Or even just…

<path fill="child">
  <linearGradient>...</linearGradient>
  <meshGradient>...</meshGradient>
</path>

If we don't want the last child

<path mask="child(0)">
  <mask>...</mask>
  <mask>...</mask>
</path>

Proposal B: child(name)

<path fill="child(a)" stroke="child(b)">
  <linearGradient name="a">...
  </linearGradient>
  <linearGradient name="b">...
  </linearGradient>
</path>

Proposal B: child(name)

• Acts as scoped ID
• Means adding name to all paint servers etc.

<textPath>

<path id="path"/>
<textPath xlink:href="#path">
  ...
</textPath>

<textPath>
  <path d="..." />
</textPath>

and/or:

<textPath path="M23 45...">...
</textPath>

<feImage>

<filter>
  <feImage xlink:href="#smiley"
     x="0" y="0"
     width="100%" height="100%"
     preserveAspectRatio="none"/>
</filter>

<filter>
  <feImage>
    <rect>
  </feImage>
</filter>

• Co-ord space?

Useful?

<g cursor="child, wait">
  <cursor>...</cursor>
</g>

<path marker-start="child">
  <marker>...</marker>
</path>

Summary

• clip-path → <clipPath>
• cursor → <cursor>
• fill, stroke → <linearGradient>, <radialGradient>, <pattern>
• filter → <filter>
• marker, marker-start, marker-mid, marker-end → <marker>
• mask → <mask>
• <feImage> → SVG content
• textPath xlink:href → <path>

Masks / clip-paths in HTML

• Concern about -webkit-mask
• Proposal to use SVG masks / clip paths (and filters) in HTML
• Issues:
  1. SVG masks use luminance (Fixed!)
  2. Requires <mask> wrapping element (ACTION-3256)

Discussion

• Proposal as a whole
• child(n) vs child(name)
• Scope