app/assets/images/dashed-border-govuk-blue.svg

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#185FA0;stroke-width:2;stroke-miterlimit:10;}
</style>
<g>
	<polyline class="st0" points="14,5.1 14,1 9.9,1 	"/>
	<polyline class="st0" points="5.1,1 1,1 1,5.1 	"/>
	<polyline class="st0" points="1,9.9 1,14 5.1,14 	"/>
	<polyline class="st0" points="9.9,14 14,14 14,9.9 	"/>
</g>
</svg>
Style ‘likely’ area with a dashed line We’ve had some feedback that relying only on luminosity and position to differentiate between the ‘will get alert’ and ‘likely to get alert’ areas on the map might not be enough. We don’t want to introduce another colour because: - it will make the map look very busy - not many other colours contrast with the map tiles as well as blue - relying on colour only to communicate information is also bad for accessibility Instead we can make one of the lines a different style. I’ve gone for dashed on the ‘likely’ line because it looks nice, and gives some suggestion of a porous boundary. Implementing this means using CSS border image, because a `dashed` border (which we still have as a fallback) doesn’t render with consistent dash sizes from browser to browser. We need consistency to match the dashes that the map will be drawing (which use SVG not CSS so don’t have the same problem). 2020-09-24 15:52:38 +01:00			`<?xml version="1.0" encoding="utf-8"?>`
			`<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"`
			`viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">`
			`<style type="text/css">`
			`.st0{fill:none;stroke:#185FA0;stroke-width:2;stroke-miterlimit:10;}`
			`</style>`
			`<g>`
			`<polyline class="st0" points="14,5.1 14,1 9.9,1 "/>`
			`<polyline class="st0" points="5.1,1 1,1 1,5.1 "/>`
			`<polyline class="st0" points="1,9.9 1,14 5.1,14 "/>`
			`<polyline class="st0" points="9.9,14 14,14 14,9.9 "/>`
			`</g>`
			`</svg>`