Use new seed logo

crate/src/page/partial/image.rs

@@ -2,24 +2,7 @@ use crate::{generated::css_classes::C, Msg};
 use seed::{attrs, path, prelude::*, raw, svg, C};
 
 pub fn seed_logo_svg() -> Vec<Node<Msg>> {
-    raw![
-        r#"
-            <svg width="100%" height="100%" viewBox="0 0 946 404" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
-                <g transform="matrix(0.999934,0,0,0.999727,-93.1886,-208.737)">
-                    <g transform="matrix(1,0,0,1,-113.496,-5)">
-                        <path d="M1152.75,244.304L1152.75,509.522C1152.75,566.58 1106.43,612.904 1049.37,612.904C992.313,612.904 945.989,566.58 945.989,509.522C945.989,452.464 992.313,406.14 1049.37,406.14C1071.9,406.14 1092.76,413.364 1109.75,425.62L1109.75,244.304L1152.75,244.304ZM1049.37,449.139C1082.7,449.139 1109.75,476.196 1109.75,509.522C1109.75,542.848 1082.7,569.905 1049.37,569.905C1016.05,569.905 988.988,542.848 988.988,509.522C988.988,476.196 1016.05,449.139 1049.37,449.139Z"/>
-                    </g>
-                    <g transform="matrix(1,0,0,1,164.999,-5)">
-                        <path d="M637.757,531.022C627.852,577.776 586.305,612.904 536.618,612.904C479.559,612.904 433.235,566.58 433.235,509.522C433.235,452.464 479.559,406.14 536.618,406.14C586.305,406.14 627.852,441.268 637.757,488.022L593.054,488.022C584.383,465.298 562.372,449.139 536.618,449.139C510.863,449.139 488.853,465.298 480.181,488.022L536.618,488.022L553.209,509.522L536.618,531.022L480.181,531.022C488.853,553.746 510.863,569.905 536.618,569.905C562.372,569.905 584.383,553.746 593.054,531.022L637.757,531.022Z"/>
-                    </g>
-                    <g transform="matrix(1,0,0,1,-69.259,-5)">
-                        <path d="M637.757,531.022C627.852,577.776 586.305,612.904 536.618,612.904C479.559,612.904 433.235,566.58 433.235,509.522C433.235,452.464 479.559,406.14 536.618,406.14C586.305,406.14 627.852,441.268 637.757,488.022L593.054,488.022C584.383,465.298 562.372,449.139 536.618,449.139C510.863,449.139 488.853,465.298 480.181,488.022L536.618,488.022L553.209,509.522L536.618,531.022L480.181,531.022C488.853,553.746 510.863,569.905 536.618,569.905C562.372,569.905 584.383,553.746 593.054,531.022L637.757,531.022Z"/>
-                    </g>
-                    <path d="M318.203,329.008L274.538,329.008C274.226,310.375 265.491,293.777 251.978,282.861L223.098,311.629C218.025,316.682 209.822,316.682 204.749,311.629L175.869,282.861C162.108,293.978 153.301,310.989 153.301,330.04C153.301,363.499 180.465,390.663 213.924,390.663L213.924,390.665L225.479,391.478C230.529,392.04 235.379,392.793 240.291,394.093L257.723,380.664L261.558,402.332C266.064,404.681 270.39,407.359 274.5,410.346L295.607,404.121L291.355,425.711C294.709,429.529 297.775,433.589 300.529,437.859L322.459,439.678L310.695,458.275C312.443,463.046 313.835,467.94 314.861,472.917L334.653,482.535L316.965,495.627C316.872,500.707 316.402,505.773 315.561,510.784L330.541,526.903L309.319,532.721C307.397,537.425 305.129,541.979 302.534,546.348L310.68,566.79L288.789,564.549C285.298,568.24 281.538,571.667 277.54,574.804L277.752,596.808L258.149,586.811C253.559,588.991 248.815,590.829 243.954,592.31L236.203,612.904L221.535,596.5C216.468,596.876 211.38,596.876 206.313,596.5L191.645,612.904L183.893,592.31C179.033,590.829 174.288,588.991 169.699,586.811L150.096,596.808L150.308,574.804C146.31,571.667 142.55,568.24 139.058,564.549L117.167,566.79L125.313,546.348C122.719,541.979 120.451,537.425 118.528,532.721L97.306,526.903L112.287,510.784C111.445,505.773 110.976,500.707 110.882,495.627L110.918,492.69L153.31,492.69C153.304,493.034 153.301,493.378 153.301,493.723C153.301,511.98 161.389,528.364 174.175,539.482L204.728,509.048C209.813,503.983 218.035,503.983 223.119,509.048L253.672,539.482C266.458,528.364 274.547,511.98 274.547,493.723C274.547,460.264 247.383,433.1 213.924,433.099C211.384,433.099 208.846,433.006 206.313,432.818L191.645,449.222L183.893,428.627C179.033,427.147 174.288,425.309 169.699,423.128L150.096,433.126L150.308,411.122C146.31,407.985 142.55,404.557 139.058,400.866L117.167,403.107L125.313,382.665C122.719,378.297 120.451,373.742 118.528,369.039L97.306,363.221L112.287,347.102C111.445,342.091 110.976,337.025 110.882,331.945L93.195,318.853L112.987,309.234C114.012,304.258 115.405,299.364 117.152,294.593L105.389,275.996L127.319,274.177C130.073,269.907 133.139,265.846 136.492,262.029L132.241,240.438L153.347,246.664C157.458,243.677 161.784,240.998 166.289,238.65L170.125,216.981L187.557,230.411C192.469,229.111 197.47,228.176 202.52,227.614L213.924,208.794L225.328,227.614C230.377,228.176 235.379,229.111 240.291,230.411L257.723,216.981L261.558,238.65C266.064,240.998 270.39,243.677 274.5,246.664L295.607,240.438L291.355,262.029C294.709,265.846 297.775,269.907 300.529,274.177L322.459,275.996L310.695,294.593C312.443,299.364 313.835,304.258 314.861,309.234L318.203,329.008ZM213.924,562.544C205.477,562.544 198.619,555.686 198.619,547.239C198.619,538.792 205.477,531.934 213.924,531.934C222.371,531.934 229.229,538.792 229.229,547.239C229.229,555.686 222.371,562.544 213.924,562.544ZM213.924,258.112C222.371,258.112 229.229,264.97 229.229,273.417C229.229,281.864 222.371,288.722 213.924,288.722C205.477,288.722 198.619,281.864 198.619,273.417C198.619,264.97 205.477,258.112 213.924,258.112Z"/>
-                </g>
-            </svg>
-        "#
-    ]
+    raw![include_str!("../../../../seed_branding/seed_logo.min.svg")]
 }
 
 pub fn spinner_svg() -> Vec<Node<Msg>> {

favicons/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#00a300</TileColor>
+            <TileColor>#da532c</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

seed_branding/README.md

@@ -0,0 +1,61 @@
+# How to generate the images
+
+The only fully manually drawn image is `seed_logo.svg`, other images are mostly
+generated with a sequence of automatic or manual steps:
+
+1. The first step is to generate the small png logo.
+   Using [Inkscape](https://inkscape.org) this can be done at the command line:
+
+   ```bash
+   inkscape --without-gui --file=seed_logo.svg --export-png=seed_logo_120.png --export-width=120
+   ```
+
+2. Export the capital _S_ in a new file.
+   Using Inkscape again, is possible to export a single drawing item, by `id` using the command line:
+
+   ```bash
+   inkscape --without-gui --file=seed_logo.svg --export-id=S --export-id-only --vacuum-defs --export-plain-svg=seed_logo_square.svg
+   ```
+
+3. Make the logo square for real (there is no command line option to change the sheet size)
+
+4. Once we have a `seed_logo_square.svg`, we can generarte the 512x512 png image.
+   Using the command line:
+
+   ```bash
+   inkscape --without-gui --file=seed_logo_square.svg --export-width=512 --export-height=512 --export-png=seed_logo_square_512.png
+   ```
+
+5. Reduce the generated png sizes (optional).
+   On the command line, with `pngcrush`:
+
+   ```bash
+   pngcrush -ow seed_logo_120.png
+   pngcrush -ow seed_logo_square_512.png
+   ```
+
+6. Reduce the size of the svg files for publishing, generating: `seed_logo.min.svg` and `seed_logo_square.min.svg`.
+   On the command line this can be done using the `svgcleaner` utility (this is in Rust, cargo installable).
+
+   ```bash
+   svgcleaner --coordinates-precision 2 --properties-precision 2 --transforms-precision 2 --paths-coordinates-precision 2 seed_logo.svg seed_logo.min.svg
+   svgcleaner --coordinates-precision 2 --properties-precision 2 --transforms-precision 2 --paths-coordinates-precision 2 seed_logo_square.svg seed_logo_square.min.svg
+   ```
+
+7. Save a modified copy of `seed_logo_square.svg`, changing the `viewBox` to `"0 0 16 16"`, to follow the
+   [Apple Safari Pinned Tab specification](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html)
+   to `../favicons/safari-pinned-tab.svg`
+
+8. Minimize with `svgcleaner` the new file.
+   Using the command line:
+
+   ```bash
+   svgcleaner --coordinates-precision 2 --properties-precision 2 --transforms-precision 2 --paths-coordinates-precision 2 seed_logo_square.svg ../favicons/safari-pinned-tab.svg
+   ```
+
+9. Generate the _favicons_.
+   This can be done using https://realfavicongenerator.net, uploading the square svg logo.
+
+10. Compress the downloaded png files (optional)
+
+11. The uncompressed `seed_logo_square.svg` can be removed, we can commit the `seed_logo_square.min.svg` version only.