Use inline SVG for stretchy elements (#807)

Browse Source

* Use inline SVG for stretchy elements

Replace all background-images with inline SVG code.

Pros:

* `\color` works in all browsers, even IE/Edge
* Better printing
* Much simpler CSS
    * No links to background-images
    * No `mask`
    * No browser-detection
* No external SVG files
* Faster first rendering

Cons

* No image caching
* Heavier HTML load
* Larger JavaScript file
* `\cancel` line is in `px` units, not `em` units

* Remove static/images from make file

* Change \cancel from px to em

* regenerate screenshots for functions using inline svg

...

This commit is contained in:

Ron Kok

2017-08-19 18:51:16 -07:00

committed by Kevin Barabash

parent 81037e5d10

commit a4b1bf01be

56 changed files with 534 additions and 823 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

test/screenshotter/images/StretchyAccent-firefox.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 52 KiB After Width:  |  Height:  |  Size: 54 KiB