Experimental build of COLRv1+SVG to see if it works in FF

This commit is contained in:
Rod S 2022-01-13 20:52:19 -08:00
parent 9a5261d871
commit d9c748c5fb
17 changed files with 165 additions and 0 deletions

View file

@ -0,0 +1,4 @@
<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- just the pencil -->
<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
</svg>

After

Width:  |  Height:  |  Size: 704 B

View file

@ -0,0 +1,4 @@
<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- just the pencil -->
<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
</svg>

After

Width:  |  Height:  |  Size: 704 B

View file

@ -0,0 +1,4 @@
<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- just the pencil -->
<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
</svg>

After

Width:  |  Height:  |  Size: 704 B

View file

@ -0,0 +1,4 @@
<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- just the pencil -->
<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
</svg>

After

Width:  |  Height:  |  Size: 704 B

View file

@ -0,0 +1,4 @@
<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- just the pencil -->
<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
</svg>

After

Width:  |  Height:  |  Size: 704 B

View file

@ -0,0 +1,4 @@
<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- just the pencil -->
<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
</svg>

After

Width:  |  Height:  |  Size: 704 B

62
colrv1/handwriting.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
@font-face {
font-family: 'colrv1_and_svg';
font-style: normal;
font-weight: 400;
src: url(build/NotoHandWriting-Regular.ttf);
}
@font-face {
font-family: 'colrv1_only';
font-style: normal;
font-weight: 400;
src: url(build/NotoHandWritingCOLRv1-Regular.ttf);
}
@font-face {
font-family: 'glyf_only';
font-style: normal;
font-weight: 400;
src: url(build/NotoHandWritingglyf-Regular.ttf);
}
svg_and_colrv1 {
font-family: "colrv1_and_svg";
font-size: 6em;
}
colrv1_only {
font-family: "colrv1_only";
font-size: 6em;
}
glyf_only {
font-family: "glyf_only";
font-size: 6em;
}
</style>
<div>
<svg_and_colrv1>&#x270d;</svg_and_colrv1>
<svg_and_colrv1>&#x270d;&#x1f3fb;</svg_and_colrv1>
<svg_and_colrv1>&#x270d;&#x1f3fc;</svg_and_colrv1>
<svg_and_colrv1>&#x270d;&#x1f3fd;</svg_and_colrv1>
<svg_and_colrv1>&#x270d;&#x1f3fe;</svg_and_colrv1>
<svg_and_colrv1>&#x270d;&#x1f3ff;</svg_and_colrv1>
</div>
<div>
<colrv1_only>&#x270d;</colrv1_only>
<colrv1_only>&#x270d;&#x1f3fb;</colrv1_only>
<colrv1_only>&#x270d;&#x1f3fc;</colrv1_only>
<colrv1_only>&#x270d;&#x1f3fd;</colrv1_only>
<colrv1_only>&#x270d;&#x1f3fe;</colrv1_only>
<colrv1_only>&#x270d;&#x1f3ff;</colrv1_only>
</div>
<div>
<glyf_only>&#x270d;</glyf_only>
<glyf_only>&#x270d;&#x1f3fb;</glyf_only>
<glyf_only>&#x270d;&#x1f3fc;</glyf_only>
<glyf_only>&#x270d;&#x1f3fd;</glyf_only>
<glyf_only>&#x270d;&#x1f3fe;</glyf_only>
<glyf_only>&#x270d;&#x1f3ff;</glyf_only>
</div>

View file

@ -0,0 +1,22 @@
family = "Noto Handwriting glyf Test"
output_file = "NotoHandWritingglyf-Regular.ttf"
color_format = "glyf"
clipbox_quantization = 32
[axis.wght]
name = "Weight"
default = 400
[master.regular]
style_name = "Regular"
srcs = [
"red_pen/emoji_u270d.svg",
"red_pen/emoji_u270d_1f3fb.svg",
"red_pen/emoji_u270d_1f3fc.svg",
"red_pen/emoji_u270d_1f3fd.svg",
"red_pen/emoji_u270d_1f3fe.svg",
"red_pen/emoji_u270d_1f3ff.svg"
]
[master.regular.position]
wght = 400

View file

@ -0,0 +1,22 @@
family = "Noto Handwriting COLRv1 Test"
output_file = "NotoHandWritingCOLRv1-Regular.ttf"
color_format = "glyf_colr_1"
clipbox_quantization = 32
[axis.wght]
name = "Weight"
default = 400
[master.regular]
style_name = "Regular"
srcs = [
"red_pen/emoji_u270d.svg",
"red_pen/emoji_u270d_1f3fb.svg",
"red_pen/emoji_u270d_1f3fc.svg",
"red_pen/emoji_u270d_1f3fd.svg",
"red_pen/emoji_u270d_1f3fe.svg",
"red_pen/emoji_u270d_1f3ff.svg"
]
[master.regular.position]
wght = 400

View file

@ -0,0 +1,24 @@
# This is supposed to work in Firefox and Safari as they support OT-SVG
family = "Noto Handwriting Test"
output_file = "NotoHandWriting-Regular.ttf"
color_format = "glyf_colr_1_and_picosvgz"
clipbox_quantization = 32
[axis.wght]
name = "Weight"
default = 400
[master.regular]
style_name = "Regular"
srcs = [
"red_pen/emoji_u270d.svg",
"red_pen/emoji_u270d_1f3fb.svg",
"red_pen/emoji_u270d_1f3fc.svg",
"red_pen/emoji_u270d_1f3fd.svg",
"red_pen/emoji_u270d_1f3fe.svg",
"red_pen/emoji_u270d_1f3ff.svg"
]
[master.regular.position]
wght = 400

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.5 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.5 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

5
colrv1/requirements.txt Normal file
View file

@ -0,0 +1,5 @@
nanoemoji >= 0.9.12 # we need latest spec support
Brotli>=1.0.9 # for compare sizes
# The following packages are considered to be unsafe in a requirements file:
# setuptools