Inline vector images (paths) in Sciter

The path is an url with custom path:{commands} schema that directly contains SVG's path commands ) used by <path d="{commands}" />

Therefore exisiting SVG WYSIWYG editing tools and collections of icons can be used pretty much as they are - by copying content of d attribute from SVG into CSS or HTML (to src attribute of an <img> or a <picture>).

Sciter supports full set of "d comands" : MmLlHhVvCcSsQqTtAaZz.

Example, this style:

div {
  background-image: url( path:M0,0 L50,100 L100,0z );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  fill: red;
  stroke: blue;
}

will show at the element's background triangle with apexes at (0,0), (50,100) and (100,0).

CSS properties used for drawing

For drawing paths Sciter uses following properties:

These properties are shared with SVG and used for exactly same purpose.

Expandable iv-images

Sometimes there is need to have expandable vector images that can be adjusted to given size.

In order to support such images d-commands were expanded by the following.

'E' command

Expandable image command sequence shall start from 'E'.

right / bottom anchored coordinates

Uppercase d-commands ( MLHVCSQTA ) that expect absolute coordinates may use negative coordinates including negative zero.

Negative coordinate in this case is treated as offset from right or bottom of image rectangle. Therefore this:

 background-image: url( path:E M0,0 L-0,-0 );
 stroke: blue;
stroke-width: 3px;

will draw single diagonal 3px thick line from left/top to right/bottom corners of element's background area.

proportional coordinates

You can also define coordinates as proportions of image rendering site.  Proportional coordinate is a number 0.0 ... 1.0 followed by '*' (astersisk) sign. This:

background-image: url( path:E M0,0 L1*,1* );
stroke: red;
stroke-width: 3px;

will also draw single diagonal 3px thick line from left/top to right/bottom corners of element's background area.

Proportional coordinates can also be negative - anchored to right / bottom rendering box of the image.