Use SVG lockup for GOV.UK in header

[36degrees]

What

Use an SVG lockup of the GOV.UK logotype in the header.

This will help ensure consistent alignment between the crown emblem and the text, and ensure that the correct typeface is used regardless of whether the webfont loads.

This was previously discussed in #1575 (comment).

Why

At the minute, our font loading strategy is to use display: fallback which gives a short (3s) swap period during which the font can be swapped out to Transport. If the font takes longer than 3s to load (e.g. on a slow 3G connection) the font swap will not occur and the page will use the next font in the stack (usually Arial).

This means 'GOV.UK' in the logo in the header is rendered incorrectly. As this forms a key part of the brand, we should take care to ensure that it is rendered correctly wherever possible.

@Nooshu has been looking at #1437 again and we might consider changing the font-face display attribute to:

• swap which gives an infinite swap time, but makes it more likely that Arial will be displayed briefly before being swapped out (because, at least as implemented in Chrome, there is no block period)
• optional which means the browser can choose not to download the font at all, for example if it knows it is on a slow connection.

Separately, we've seen issues with alignment between the crown and the logotype before on a few occasions, and using a lockup should fix this.

Further details

We'll need to consider:

• the fallback PNG, used by browsers that do not support SVG
• how the logo is announced to screen readers
• print style sheet

Who needs to know

Designers; Developers

Done when

• GOV.UK logo has been switched for an accessible, performant SVG
• We have decided whether a fallback is necessary for IE8 and how that should work
• We have decided whether a fallback is necessary for browsers that do not support SVG other than IE8 and how that should work
• Release notes make sense for users who have not made the changes in Change approach to fallback PNG in the header to fix blank data URI from triggering CSP error #2229
• Release notes prompt users who have not made the changes in Change approach to fallback PNG in the header to fix blank data URI from triggering CSP error #2229 to do so now
• Browser and accessibility testing completed
• Tested on slow 3G connection (see above)
• "Details of breaking change" section below completed to help with writing release notes

Details of breaking change

• Which users are affected: All.
• The change that’s been made: Logo container and contents replaced by a single SVG.
• Changes users will have to make: Remove the existing logo elements and graphics and replace them with the new lockup SVG.
• Impact of users not making those changes: The previous logo will no longer render correctly as styles associated with it have been removed.

[NickColley]

Think this would be a breaking change since you'd end up with [crown] GOV.UK GOV.UK if users had not updated their markup.

[NickColley]

I've made a very highly optimised version of this.

Just the crown came to 1kb, with the GOV.UK and optimisation it comes to 1.56k. I've also kept the crown and the text as separate paths as it'll mean you could set different styling on them in needed in the future.

<svg role="presentation" focusable="false" class="govuk-header__logotype-crown" 
 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 557.3 84.1" height="26" width="152">
    <path fill="currentColor" d="M4.4 51.2a6.9 6.9 0 009-3.8 6.8 6.8 0 00-3.9-9 7 7 0 00-9 3.7 7 7 0 003.9 9zm102-26.8c-3.6 1.4-7.8-.2-9-3.7a7 7 0 013.7-9.2c3.6-1.3 7.6.3 9.1 4a7 7 0 01-3.9 8.9zm15.7 9.2a6.9 6.9 0 01-9-3.7c-1.5-3.6.2-7.7 3.7-9a7 7 0 019.1 3.8 6.9 6.9 0 01-3.8 8.9zm4.7 17.6a7 7 0 01-9.1-3.8 6.8 6.8 0 013.8-9 7 7 0 019.2 3.7 7.2 7.2 0 01-3.9 9zM69.2 11.9l8.8 4.7v-13l-8.8 2.8-.9-1 3.6-11H59.2l3.5 11-1 1L53 3.6v13l8.8-4.7.9 1-5 15.2v.1c-.2.8-.4 1.6-.4 2.4 0 4 3 7.5 7 8h.1l1 .2 1-.1h.2c4-.6 7-4.1 7-8 0-.9 0-1.8-.3-2.5l-5-15.4 1-.9zm-3.7 74.6c16.8 0 32.6 1.1 46.8 3.2 4-16.8 8.8-26.5 14-33.3l-9.6-3.3c1 4.8 1 7.1 0 10-1.5-1.3-3-4.2-4.2-8.6l-4.7 15.3c2.8-2 5-3.1 7.5-3.2-4.4 9.3-10 11.8-13.5 11a6.6 6.6 0 01-5.6-7.8c1-4.6 5.7-5.8 8-.5 4.2-8.6-3-11.3-7.6-8.7 7-7.1 7.9-13.4 2.1-21-8 6.1-8 12.3-4.5 20.7-4.6-5.4-12-2.5-9.4 6.2 3.4-5.2 7.8-2 7.1 3-.5 4.3-6.3 7.8-13.4 7.2-10.2-.9-10.8-8-11-13.7 2.4-.5 7 1.8 10.8 7.2L79.6 54c-4 4.3-8 5.2-12.2 5.3 1.4-4.4 8-11.5 8-11.5H55s6.4 7.1 7.8 11.5c-4.1 0-7.9-1-12.2-5.3l1.4 16.2C56 64.8 60.6 62.6 63 63c-.2 5.7-.8 12.7-11 13.7-7.1.6-12.8-2.9-13.4-7.2-.7-5 3.8-8.2 7-3 2.8-8.7-4.5-11.6-9.3-6.2 3.7-8.4 3.6-14.6-4.5-20.7-5.8 7.6-5 13.9 2.2 21-4.7-2.6-11.9.1-7.7 8.7 2.3-5.4 7-4.1 8 .5.7 3.3-1.2 7-5.6 7.9-3.5.7-9-1.8-13.4-11.1 2.5 0 4.7 1.3 7.4 3.2L18 54.5a18.6 18.6 0 01-4.3 8.7c-1.1-3-.9-5.3 0-10.1l-9.4 3.3c5 6.9 9.8 16.6 13.9 33.3 14.7-2 30.5-3.2 47.3-3.2zM14.3 33.6c-3.6 1.5-7.7-.2-9-3.6A7 7 0 019 20.8c3.6-1.4 7.7.3 9.2 3.9a7 7 0 01-3.9 9zm15.8-9.2c-3.6 1.5-7.8-.2-9-3.7a7 7 0 013.7-9.1c3.6-1.4 7.7.3 9.2 3.8a7 7 0 01-4 9zm17.6 5.5c-3.6 1.5-7.8-.2-9-3.7a7 7 0 013.7-9c3.6-1.5 7.7.2 9.2 3.8a7 7 0 01-4 9zm41 0c-3.6 1.5-7.8-.2-9-3.7a7 7 0 013.7-9c3.6-1.5 7.7.2 9.1 3.8a7 7 0 01-3.8 9z" />
    <path fill="currentColor" d="M491.5 8h15.4v33l27.3-33h19l-26.5 30.4 28.2 46h-18L516.8 50l-9.9 11v23.2h-15.4zm-46.2 63.5q3.3 0 6.2-1 3-1 5-3 2.1-2 3.3-5 1.3-3.1 1.3-7.3V8h15.2v49.6q0 6.4-2.4 11.6-2.2 5.1-6.4 8.8-4 3.6-9.8 5.5-5.7 2-12.4 2-6.8 0-12.5-2T423 78q-4.2-3.7-6.5-8.8-2.3-5.2-2.3-11.6V8h15.3v47.3q0 4.2 1.2 7.3 1.2 3 3.3 5 2.1 2 5 3 3 1 6.3 1zm-62.8 4.2q0-2 .8-3.6.8-1.8 2-3 1.4-1.4 3.2-2.2 1.8-.7 3.8-.7 2 0 3.7.7 1.7.8 3 2.1 1.4 1.3 2.1 3 .8 1.8.8 3.7 0 2-.8 3.8-.7 1.8-2 3-1.4 1.4-3.1 2.2-1.8.7-3.7.7-2 0-3.8-.7-1.8-.8-3.1-2.1t-2.1-3q-.8-1.8-.8-3.9zm-44.8 8.7L316.2 8h17.3l14.7 57.4h.5L363.2 8h17l-21.5 76.4zM273.7 7q8.6 0 15.3 3 6.8 3.1 11.5 8.4 4.7 5.3 7.1 12.5 2.6 7.1 2.6 15.3 0 8.2-2.6 15.4-2.4 7.1-7.1 12.4-4.7 5.3-11.5 8.4-6.7 3-15.2 3-8.6 0-15.4-3-6.7-3-11.4-8.4-4.7-5.3-7.2-12.4-2.4-7.2-2.4-15.4t2.4-15.3q2.5-7.2 7.2-12.5t11.4-8.3Q265.2 7 273.8 7zm0 64.5q5 0 8.8-1.9 3.9-2 6.5-5.3t4-7.9q1.2-4.6 1.2-10V46q0-5.4-1.3-10t-4-8q-2.5-3.3-6.4-5.2-3.7-1.9-8.7-1.9-5 0-8.9 2-3.8 1.8-6.4 5.1-2.6 3.4-3.9 8-1.3 4.6-1.3 10v.4q0 5.4 1.3 10t3.9 8q2.6 3.3 6.4 5.2 3.9 1.9 8.9 1.9zm-99.4-25q0 4.8 1.2 9.3 1.3 4.6 3.8 8 2.5 3.5 6.3 5.6 4 2 9.3 2 5.2 0 8.6-1.6 3.4-1.6 5.4-4 2.1-2.6 3-5.4.8-3 .8-5.4v-.7H193V42.5h34.6v41.9h-13.5v-9q-1.5 2.2-3.6 4.1-2.1 1.8-4.8 3.1-2.7 1.3-5.8 2-3.2.8-6.8.8-8.3 0-14.8-3t-11-8.4q-4.4-5.3-6.7-12.4-2.3-7.2-2.3-15.4t2.5-15.3q2.7-7.2 7.4-12.5 4.8-5.3 11.5-8.3 6.7-3.1 15-3.1 5.5 0 10.4 1.3 4.9 1.2 8.9 3.5t7 5.6q3.2 3.3 5 7.2l-13.4 7.7q-1.3-2.5-3-4.6-1.6-2-3.7-3.6-2.2-1.5-5-2.4-2.7-.9-6.1-.9-5.4 0-9.3 2.1-3.8 2.1-6.3 5.6-2.6 3.4-3.8 8-1.2 4.5-1.2 9.4z" />
</svg>

One thing I've noticed is that the main GOV.UK site seems to have the crown and the text aligned nicer:

Whereas ours feels a bit off:

Would be good to get @christopherthomasdesign thoughts on what the proper alignment should be like.

This new version is aligned similar to the original GOV.UK version:

I used SVGOMG and some manual tweaking of paths to get this. I've attached the original inkscape document as well incase it's useful.

Inkscape SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   role="presentation"
   focusable="false"
   class="govuk-header__logotype-crown"
   viewBox="0 0 557.33372 84.066666"
   height="26"
   width="152"
   version="1.1"
   id="svg4"
   sodipodi:docname="lockup.svg"
   inkscape:version="0.92.3 (2405546, 2018-03-11)">
  <defs />
  <sodipodi:namedview
     pagecolor="#ffffff"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="995"
     showgrid="false"
     inkscape:zoom="22.627417"
     inkscape:cy="9.8110156"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:cx="15.408431"
     inkscape:current-layer="svg4"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0" />
  <path
     id="path2"
     d="m 4.3585276,51.169451 c 3.4756966,1.489584 7.6465334,-0.198612 9.0368124,-3.773615 1.489584,-3.575001 -0.198611,-7.646532 -3.87292,-9.036811 -3.4756966,-1.489584 -7.5472271,0.297917 -9.03681209,3.773614 -1.39027784,3.475697 0.29791697,7.547227 3.87291969,9.036812 z M 106.34541,24.356932 c -3.57501,1.489585 -7.745839,-0.198611 -9.036809,-3.674308 -1.48959,-3.575002 0.19861,-7.745839 3.773609,-9.136118 3.575,-1.390278 7.64653,0.297917 9.13612,3.87292 1.29097,3.475697 -0.39723,7.447922 -3.87292,8.937506 z m 15.78959,9.235423 c -3.575,1.489585 -7.64653,-0.198611 -9.03681,-3.674308 -1.48959,-3.575002 0.19861,-7.745839 3.67431,-9.036812 3.575,-1.489585 7.64653,0.198611 9.13612,3.773614 1.48958,3.475697 -0.29792,7.447922 -3.77362,8.937506 z m 4.66737,17.577096 c -3.57501,1.489584 -7.74584,-0.198612 -9.13612,-3.773615 -1.48959,-3.575001 0.19861,-7.646532 3.87292,-9.036811 3.575,-1.489584 7.64653,0.297917 9.13612,3.773614 1.29097,3.475697 -0.39723,7.547227 -3.87292,9.036812 z M 69.205101,11.943729 78.043302,16.611094 V 3.6020566 L 69.205101,6.382614 C 69.00649,6.0846972 68.708573,5.7867803 68.31135,5.4888634 L 71.886352,-5.6333665 H 59.175233 L 62.650929,5.4888634 C 62.353012,5.7867803 62.055095,5.9853916 61.757178,6.382614 L 53.018284,3.6020566 V 16.611094 l 8.738894,-4.667365 c 0.297917,0.297917 0.595834,0.695139 0.893751,0.893751 l -4.965281,15.293066 v 0.09931 c -0.198611,0.794445 -0.397222,1.588889 -0.397222,2.383334 0,4.071531 3.078475,7.447923 6.951393,8.043756 h 0.198612 c 0.297916,0 0.695139,0.09931 0.993056,0.09931 0.397222,0 0.695139,0 0.993056,-0.09931 h 0.198612 c 3.972225,-0.595833 7.050699,-4.07153 7.050699,-8.043756 0,-0.794445 -0.09931,-1.688195 -0.397223,-2.383334 v -0.09931 L 68.212045,12.83748 c 0.397222,-0.198612 0.695139,-0.595834 0.993056,-0.893751 z m -3.674308,74.578524 c 16.78265,0 32.572248,1.092362 46.772947,3.17778 3.97223,-16.78265 8.83821,-26.514602 13.90279,-33.267384 l -9.53334,-3.376391 c 0.99306,4.865975 1.09236,7.150004 0,10.129173 -1.48958,-1.390278 -2.97917,-4.270142 -4.17084,-8.639589 l -4.66736,15.293066 c 2.78056,-1.986113 4.96528,-3.17778 7.44792,-3.277086 -4.36945,9.334729 -9.93056,11.81737 -13.50556,11.12223 -4.270139,-0.794445 -6.256249,-4.568058 -5.561119,-7.845144 0.99306,-4.667364 5.660419,-5.859031 7.944449,-0.496528 4.27014,-8.639589 -2.97917,-11.320842 -7.547219,-8.738895 7.050689,-7.150005 7.845139,-13.406259 2.08542,-20.953487 -7.944465,6.057644 -8.043765,12.214592 -4.46876,20.65557 -4.667364,-5.362503 -12.015984,-2.482641 -9.434037,6.156948 3.376391,-5.163892 7.845147,-1.986111 7.150007,3.078475 -0.59583,4.270142 -6.355562,7.745839 -13.406261,7.150005 C 68.31135,75.797245 67.715516,68.746546 67.4176,62.98682 c 2.48264,-0.496528 7.050699,1.787502 10.923618,7.249311 l 1.290974,-16.286123 c -4.071531,4.369447 -7.944451,5.263198 -12.214592,5.362504 1.390278,-4.369447 7.944449,-11.519453 7.944449,-11.519453 H 55.103702 c 0,0 6.35556,7.150006 7.845144,11.519453 -4.170836,-0.09931 -7.94445,-0.993057 -12.214591,-5.362504 l 1.390279,16.286123 c 3.872919,-5.461809 8.440978,-7.646533 10.824312,-7.249311 -0.297917,5.759726 -0.893751,12.711119 -11.022923,13.704176 -7.150006,0.595834 -12.810426,-2.879863 -13.40626,-7.150005 -0.69514,-4.965281 3.773614,-8.242367 7.050699,-3.078475 2.681252,-8.639589 -4.568058,-11.519451 -9.334729,-6.156948 3.674309,-8.440978 3.575003,-14.597926 -4.568058,-20.65557 -5.759727,7.547228 -4.965282,13.803482 2.184723,20.953487 -4.667364,-2.581947 -11.817369,0.09931 -7.646533,8.738895 2.28403,-5.461809 7.0507,-4.170836 8.043756,0.496528 0.695139,3.277086 -1.290973,7.050699 -5.660421,7.845144 -3.475697,0.69514 -8.937506,-1.787501 -13.406259,-11.12223 2.48264,0.09931 4.667364,1.290973 7.447922,3.277086 L 17.963398,54.545842 c -1.191667,4.369447 -2.681252,7.150005 -4.270141,8.639589 -1.092362,-2.979169 -0.893751,-5.263198 0,-10.129173 L 4.2592226,56.432649 C 9.2245031,63.284737 14.09048,73.016688 18.16201,89.700033 32.859243,87.614615 48.748142,86.522253 65.530793,86.522253 Z M 14.304058,33.641398 c -3.575002,1.489583 -7.7458375,-0.198611 -9.0368104,-3.674308 -1.4895848,-3.575004 0.198611,-7.745838 3.7736136,-9.136116 3.5750028,-1.390279 7.6465308,0.297916 9.1361158,3.872918 1.290973,3.475697 -0.397223,7.447922 -3.872919,8.937506 z M 30.082571,24.37182 c -3.575003,1.489584 -7.745839,-0.19861 -9.036811,-3.674307 -1.489584,-3.575003 0.198611,-7.745838 3.773613,-9.136117 3.575003,-1.390278 7.646532,0.297916 9.136117,3.872919 1.290973,3.475696 -0.397223,7.447922 -3.872919,8.937505 z m 17.600648,5.551749 c -3.575002,1.489583 -7.745839,-0.198612 -9.036812,-3.674309 -1.489583,-3.575002 0.198611,-7.745837 3.773614,-9.136116 3.575003,-1.390279 7.646533,0.297916 9.136118,3.872919 1.290973,3.475697 -0.397223,7.447921 -3.87292,8.937506 z m 40.985784,-0.0056 c -3.575002,1.489584 -7.745839,-0.198612 -9.036811,-3.674308 -1.489585,-3.575003 0.198611,-7.745837 3.773613,-9.136116 3.575003,-1.390279 7.646531,0.297916 9.136126,3.872918 1.29097,3.475698 -0.39723,7.447922 -3.872928,8.937506 z"
     inkscape:connector-curvature="0"
     style="stroke-width:0.99305624" />
  <path
     d="m 491.5007,8.041742 h 15.43142 V 41.086201 L 534.17685,8.041742 h 18.9969 l -26.4996,30.331013 28.20258,45.975166 h -17.9327 l -20.16749,-34.21504 -9.84442,11.015005 V 84.348481 H 491.5007 Z m -46.24107,63.433133 q 3.35235,0 6.22575,-0.957795 2.92667,-1.011035 5.00192,-2.979861 2.1285,-2.022069 3.35237,-5.055171 1.22388,-3.086283 1.22388,-7.236785 V 7.9399666 h 15.2187 V 57.533805 q 0,6.385299 -2.34134,11.546835 -2.2881,5.161534 -6.43849,8.780207 -4.09732,3.618449 -9.79122,5.587276 -5.69395,1.968829 -12.45151,1.968829 -6.75815,0 -12.45152,-1.968829 -5.69392,-1.968827 -9.84442,-5.587276 -4.15056,-3.618394 -6.49166,-8.780207 -2.2881,-5.161536 -2.2881,-11.546835 V 7.9399666 h 15.27188 V 55.245263 q 0,4.150558 1.22387,7.236785 1.22388,3.033102 3.29912,5.055171 2.12851,1.968826 5.00194,2.979861 2.92667,0.957795 6.27894,0.957795 z m -62.73895,4.254627 q 0,-1.968827 0.74494,-3.671631 0.79818,-1.755985 2.12848,-3.033101 1.33031,-1.330299 3.08628,-2.075251 1.80923,-0.79819 3.77807,-0.79819 1.96883,0 3.72481,0.79819 1.75598,0.744952 3.08628,2.075251 1.33031,1.277059 2.07524,3.033101 0.79821,1.702804 0.79821,3.671631 0,2.022066 -0.79821,3.778053 -0.74493,1.755985 -2.07524,3.086284 -1.3303,1.330298 -3.08628,2.07525 -1.75598,0.744952 -3.72481,0.744952 -1.96884,0 -3.77807,-0.744952 -1.75597,-0.744952 -3.08628,-2.07525 -1.3303,-1.330299 -2.12848,-3.086284 -0.74494,-1.755987 -0.74494,-3.778053 z M 337.71832,84.35072 316.16752,8.0473408 h 17.29393 l 14.73949,57.3646912 h 0.53212 L 363.15345,8.0473408 h 17.0812 L 358.68384,84.35072 Z M 273.75336,6.9780873 q 8.51374,0 15.27187,3.0862827 6.75815,3.033101 11.44047,8.354185 4.73584,5.268012 7.1836,12.451502 2.50094,7.13042 2.50094,15.325055 0,8.247817 -2.50094,15.378238 -2.44776,7.130419 -7.1836,12.451502 -4.68265,5.321195 -11.44047,8.354185 -6.75813,3.0331 -15.27187,3.0331 -8.56692,0 -15.32506,-3.0331 -6.70495,-3.033102 -11.44046,-8.354185 -4.68266,-5.321195 -7.18361,-12.451502 -2.44775,-7.130421 -2.44775,-15.378238 0,-8.194635 2.44775,-15.325055 2.50095,-7.1836 7.18361,-12.451502 4.73584,-5.321196 11.44046,-8.354185 6.75814,-3.0862827 15.32506,-3.0862827 z m 0,64.4911897 q 5.00194,0 8.78021,-1.862408 3.83129,-1.915644 6.43849,-5.268011 2.6074,-3.352367 3.93771,-7.928723 1.33029,-4.576354 1.33029,-10.003972 v -0.425697 q 0,-5.374434 -1.33029,-9.950788 -1.33031,-4.629427 -3.93771,-7.981906 -2.60742,-3.352364 -6.43849,-5.214773 -3.77806,-1.915645 -8.78021,-1.915645 -5.00193,0 -8.83339,1.915645 -3.83129,1.862409 -6.43847,5.214773 -2.55419,3.352367 -3.88449,7.981906 -1.33028,4.576242 -1.33028,9.950788 v 0.425697 q 0,5.427618 1.33028,10.003972 1.3303,4.576356 3.88449,7.928723 2.60741,3.352367 6.43847,5.268011 3.83129,1.862408 8.83339,1.862408 z M 174.30258,46.411762 q 0,4.895509 1.22388,9.4184 1.22386,4.522893 3.7248,7.981906 2.50095,3.458787 6.3853,5.587278 3.88447,2.075248 9.25886,2.075248 5.16158,0 8.5669,-1.649562 3.4588,-1.649565 5.48086,-4.097319 2.07527,-2.500936 2.87345,-5.374434 0.85137,-2.87344 0.85137,-5.321195 V 54.287133 H 193.13926 V 42.527007 h 34.5347 v 41.824664 h -13.51571 v -8.939754 q -1.43674,2.234911 -3.56522,4.097316 -2.12849,1.809225 -4.78909,3.139525 -2.6606,1.277059 -5.85346,2.022067 -3.13953,0.744951 -6.70496,0.744951 -8.3542,0 -14.84642,-3.033101 -6.49166,-3.0331 -10.96182,-8.354185 -4.41658,-5.321195 -6.75815,-12.451501 -2.28808,-7.13042 -2.28808,-15.378238 0,-8.194635 2.55418,-15.325055 2.60741,-7.183603 7.34316,-12.451502 4.78908,-5.321195 11.49363,-8.354186 6.75815,-3.0862811 15.11233,-3.0862811 5.42761,0 10.26989,1.2770574 4.89551,1.2238761 8.88657,3.5652117 4.04415,2.288093 7.13043,5.587275 3.08628,3.245946 5.00192,7.236785 l -13.51572,7.609065 q -1.22387,-2.447754 -2.87344,-4.523005 -1.64956,-2.128489 -3.8313,-3.618391 -2.12848,-1.543143 -4.89549,-2.394571 -2.76703,-0.904613 -6.17258,-0.904613 -5.37443,0 -9.25885,2.128488 -3.88448,2.075252 -6.38529,5.53404 -2.50095,3.458787 -3.72484,8.035086 -1.22386,4.523005 -1.22386,9.36522 z"
     inkscape:connector-curvature="0"
     style="stroke-width:0.99305624" />
  <metadata
     id="metadata1133">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <metadata
     id="metadata1220">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
</svg>

[36degrees]

When writing the release notes for this we'll need to consider that users may not have made the changes in #2229 as they were made in a minor release and the change was not flagged in the release notes. So some users may still be using the <image> approach for the fallback image. Any instructions we give should take this into account, and we should encourage users to do so.

We'll also need to think about how this works for IE8, which currently uses the PNG fallback for the crown, and also for other browsers that don't support SVG, which currently do not see a crown emblem at all.

[christopherthomasdesign]

Whilst looking into this I found that the logo used in the header (and on GOV.UK the website) doesn't quite match that in the GOV.UK brand guide. Just slightly different kerning on the letters, and spacing between the crown and the type. I think the kerning will just be down to the differences in the ways browsers render type vs in illustrator etc. But I'm not sure if the other spacing was intentional or not.

Design System:

GOV.UK brand guide:

When creating the 'lockup' SVG we should decide whether to:

1. mimic the existing header logo as closely as possible, or
2. use the opportunity to have a logo that's in line with the brand guide, nicely kerned etc.

Option 1 would cause the least disruption as far as I can see – the visual difference between a service using the new SVG lockup and one using an older version of frontend should be imperceptible.

When we get round to doing this I'll investigate with some people from the GOV.UK team and the GDS graphic design community.

[vanitabarrett]

We've decided not to include this in v4.0.0. The work seems more complex than we first thought, especially as it might require collaboration with GOV.UK and designers across GDS. There are also some questions we discussed at dev catch-up, e.g: how to deal with fallbacks for browsers that don't support SVGs but aren't IE8, that need to be investigated properly before we make the change. We don't want to rush this work, so let's remove it from v4.0.0.

[vanitabarrett]

cc @hannalaakso I've left this card in progress for now in case there's anything you want to write up from any investigations you've done, but feel free to move it off the board afterwards!

[owenatgov]

As we're going to be dropping support for IE in v5, the need for a PNG fallback isn't going to be there anymore from 5 onwards. We could therefore introduce a version of #1960 without the need for a PNG fallback in v5. @colinrotherham also pointed out we could explore alternative alignment methodologies instead of an SVG. The plan is to run this past the designers to assess the risks of the govuk logo not using the transport font. I've added the v5 milestone as this could potentially go in with v5.

[querkmachine]

I've crossed out many of the "done when" items as we've opted not to have a non-SVG fallback and to not explore alternative webfont loading methods.

We'd still like to do more accessibility testing on this new lockup before closing this issue, however.

[querkmachine]

Accessibility testing done. Closing this down as it's surplus to demands. 👍