[idea] lighweight inline vector images in CSS and HTML

Consider this SVG fragment:

   <path d="M0,0 L50,100 L100,0z">

it defines triangle with corners (0,0) , (50,100) and (100,0).  For the
list of path/d commands check for example this
<https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths> .

What if we can use those paths in CSS directly?

div.triangle {
  background-image: url( path: M0,0 L50,100 L100,0z  );
  background-size: 100% 100%;
  fill: red;          /* borrowing SVG CSS properties */
  stroke: black; /* for exactly the same purpose */
  width: 200px;
  height: 200px;
}

This will give us an option to define shapes directly in CSS or even as a
content of <img src=...> attribute.

As a bonus: to create such shapes we can use existing SVG editors and
collections of icons.Just grab content of @d from <path> and paste it into
CSS.

Here is an example of such inline images (Sciter v. 3.3.2.0 ) :



SVG paths are OK in general but they do not support "expandable" images -
images that fill given area by not just uniformly scaling but
having points anchored not just to left/top but to right/bottom.

By achieving "expandability" I've extended original "d-command" syntax a
bit:
All "absolute" commands (uppercase ones:  MLHVCSQTA) when given negative
coordinates use those as offset from right and bottom sides of image box:

Consider this style:

    section > div {
        background-image: url(path:M0,-0 C10,-0,10,0,20,0 L-20,0
C-10,0,-10,-0,-0,-0);
        background-repeat:no-repeat;
        background-size:100% 100%;
        fill:gold;
        stroke:#444;
        stroke-width:0.5px;
        width:max-content;
        padding:4px 25px;
        margin:5px;
        outline:1px dashed #aaa;
      }

It defines expandable "bell-tab" curve. Example of its rendering are
elements at the bottom:



As you see it can be expanded for various element widths.

People are trying to draw shapes by various CSS means
<https://css-tricks.com/examples/ShapesOfCSS/> for years. Can we just give
them more or less
universal tool for that?


-
Andrew Fedoniouk.

http://sciter.com