Re: [idea] lighweight inline vector images in CSS and HTML

On Sun, Mar 20, 2016 at 12:24 AM, Peter Moulder <>

> For purposes of evaluating this proposal, the closest existing mechanism
> that
> I'm aware of is:
> >   background-image: url( path: M0,0 L50,100 L100,0z );
> background-image: url(data:image/svg,<svg><path d="M0,0 L50,100
> L100,0z"/></svg>)

You don't just need to define shape but to style it too:

div {  fill: red; background-image: url( path: M0,0 L50,100 L100,0z );  }
div:hover {  fill: gold; }

You cannot do that by CSS of host document.

Yet, SVG is quite heavy for the purpose of just defining path.

> > All "absolute" commands (uppercase ones:  MLHVCSQTA) when given negative
> > coordinates use those as offset from right and bottom sides of image box:
> Having SVG coordinates adapt to available space isn't satisfactorily
> possible
> to my knowledge, beyond the sense that any image can be stretched to fill
> available space (with text and strokes simply stretching with the rest of
> the
> image).
> As noted in the papers below, javascript is possible, but hardly
> satisfactory.
> Use of calc, vw/vh units, and coordinate properties would be one
> obvious extension (does it already exist?).
> The Constraint SVG proposals also spring to mind:
>     (at WWW13, 2004; said to be implemented in Batik),
>     (at WWW10, 2001)
> pjrm.
There are no means in SVG to say "10px from right and 20px from bottom"

Other than just drawing paths CSS has a need to define paths in other
For example here:

To have unified path notation would be beneficial I think.

Andrew Fedoniouk.

Received on Sunday, 20 March 2016 16:40:23 UTC