Bakgrunder
Exempel på en blå bakgrund med arena-streck.
Använda som bakgrund
Man väljer själv beroende på sammanhang om man använder svg inbäddad i sidan, eller hänvisar till en svg-fil som ligger på annan plats.
Fil att ladda ner
Bädda in svg
Och här är svg-koden för samma bakgrund. När koden är inbäddad har man inga externa beroenden. Notera att färgkoden för fill är det som ger den blå bakgrunden. Den färgen går alltså att byta ut mot andra färger i RF:s palett för en annan färg på bakgrunden men samma linjer.
<!-- RF brand SVG – full-bleed background, decorative -->
<svg class="bg-svg" aria-hidden="true" focusable="false"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1919 1237" preserveAspectRatio="xMidYMid slice">
<defs>
<path id="a" d="M.992.136h837.681v1355.79H.992z"/>
<path id="c" d="M1.774 1.304h368.062v462.03H1.774z"/>
<path id="e" d="M1.774 1.462h407.039v458.185H1.774z"/>
<path id="g" d="M1.774.845h431.318v992.592H1.774z"/>
<path id="i" d="M1.774.603H487.07V1002.95H1.774z"/>
<path id="k" d="M1.774 1.205h1138.862v500.35H1.774z"/>
</defs>
<rect width="1919" height="1237" fill="#006bb1"/>
<g fill="none" fill-rule="evenodd" opacity=".8">
<g transform="translate(1079.573 -87.52)">
<mask id="b" fill="#fff"><use xlink:href="#a"/></mask>
<path stroke="#FFF" stroke-width=".5" d="M140.573 135.487C140.573 58.375 78.081-4.138.992-4.138m233.492 139.625C234.484 6.492 129.946-98.08.992-98.08m327.4 233.568c0-180.874-146.583-327.502-327.4-327.502m421.304 327.502c0-232.752-188.622-421.436-421.304-421.436m515.213 421.436c0-284.633-230.67-515.373-515.213-515.373m609.12 515.373C610.112-201.025 337.4-473.82.992-473.82m703.025 609.307c0-388.39-314.757-703.244-703.025-703.244M843.635 523.17c-77.09 0-139.584 62.513-139.584 139.625m139.584-233.566c-128.957 0-233.496 104.57-233.496 233.566m233.496-327.502c-180.82 0-327.402 146.628-327.402 327.502m327.402-421.437c-232.685 0-421.307 188.684-421.307 421.437m421.307-515.37c-284.545 0-515.214 230.738-515.214 515.37M843.635 53.488c-336.41 0-609.12 272.797-609.12 609.307m609.12-703.242c-388.27 0-703.028 314.853-703.028 703.242m563.437-527.349v1264.74m-93.955-1264.74v1265.777M516.137 135.446v1264.74m-93.955-1264.74v1265.777M328.227 135.446v1264.74M234.273 121.355v1279.868M140.318 135.446v1265.777m563.437-735.766H140.318M694.362 886.93h-74.531m-19.374 0h-74.536m-93.902 0h74.532m-168.441 0h74.536m-168.44 0h74.533m-168.44 0h74.533" mask="url(#b)"/>
</g>
<path stroke="#FFF" stroke-width=".5" d="M484.017 152.947v1001.8m.08.107c276.512 0 500.669-224.06 500.669-500.448 0-276.391-224.157-500.448-500.67-500.448m0 0c-8.718 0-17.382.223-25.991.663"/>
<g transform="translate(-1 165.57)">
<mask id="d" fill="#fff"><use xlink:href="#c"/></mask>
<path stroke="#FFF" stroke-dasharray="11.105,11.105" stroke-width=".5" d="M369.836 1.304C156.789 51.536-3.724 237.79-14.945 463.334" mask="url(#d)"/>
</g>
<g transform="translate(-1 689.413)">
<mask id="f" fill="#fff"><use xlink:href="#e"/></mask>
<path stroke="#FFF" stroke-dasharray="10.749,10.749" stroke-width=".5" d="M-14.248 1.462c16.943 233.875 194.58 423.21 423.06 458.185" mask="url(#f)"/>
</g>
<g transform="translate(-1 158.737)">
<mask id="h" fill="#fff"><use xlink:href="#g"/></mask>
<path stroke="#FFF" stroke-width=".5" d="M407.057.845c-4.173.653-8.33 1.36-12.468 2.115M-15.416 482.803a518.625 518.625 0 0 0-.01 24.885M420.933 992.03c4.038.515 8.092.984 12.16 1.408" mask="url(#h)"/>
</g>
<g transform="translate(-1 151.904)">
<mask id="j" fill="#fff"><use xlink:href="#i"/></mask>
<path stroke="#FFF" stroke-width=".5" d="M459.137 1002.287c8.598.44 17.253.663 25.96.663M485.017.603h-1017.43M487.069 1002.845H-530.362" mask="url(#j)"/>
</g>
<g transform="translate(-1 766.85)">
<mask id="l" fill="#fff"><use xlink:href="#k"/></mask>
<path stroke="#FFF" stroke-width=".5" d="M1140.636 31.435H-553.453m1694.09-30.23v60.46m0 148.91h-1694.09m1694.09-30.23v60.461m0 148.913h-1694.09m1694.09-30.23v60.46m0 148.91h-1694.09m1694.09-30.23v60.461m0 148.91h-1694.09m1694.09-30.23v60.46m0 148.911h-1694.09m1694.09-30.23v60.461m0 148.911h-1694.09m1694.09-30.23v60.46" mask="url(#l)"/>
</g>
</g>
</svg>
HTML för att sätta bakgrundsbild
Här är exempel på hur bilden kan sättas som bakgrund. Denna svg är särskilt lämpad eftersom den har preserveAspectRatio="xMidYMid slice" och en viewBox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page title</title>
<style>
body {
margin: 0;
min-height: 100vh;
background-image: url('bg-svg.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* optional: keeps it fixed while scrolling */
}
</style>
</head>
<body>
<!-- your content here -->
</body>
</html>