Cor de fundo padrão do elemento raiz SVG

Gostaria de definir uma cor de plano de fundo padrão para todo o documento SVG, para vermelho, por exemplo.

<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>

A solução acima funciona, mas infelizmente a propriedade background do atributo style não é padrão: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties e, portanto, é removida durante o processo de limpeza com SVG Limpador.

Existe outra maneira de declarar essa cor de fundo?

SVG 1.2 O Tiny possui preenchimento de janela Não tenho certeza de quão amplamente implementada essa propriedade é, pois a maioria dos navegadores está segmentando o SVG 1.1 no momento. Opera implementa FWIW.

Uma solução mais entre navegadores atualmente seria colar um <rect>elemento com largura e altura de 100% e preencher = "vermelho" como o primeiro filho do <svg>elemento, por exemplo:

<rect width="100%" height="100%" fill="red"/>

Encontrado isso funciona no Safari. O SVG apenas colore com cor de fundo onde a caixa delimitadora de um elemento cobre. Portanto, atribua uma borda (traço) com um limite de zero pixel. Ele preenche tudo para você com sua cor de fundo.

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

É a resposta de @Robert Longson, agora com código (originalmente não havia código, foi adicionado posteriormente):

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" fill="red"/>
</svg>

Esta resposta usa:

• https://stackoverflow.com/a/11293812/6747994
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

Deixe-me relatar uma solução muito simples que encontrei, que não está escrita nas respostas anteriores. Eu também queria definir o plano de fundo em um SVG, mas também quero que isso funcione em um arquivo SVG independente.

Bem, essa solução é realmente simples, na verdade o SVG suporta tags de estilo, para que você possa fazer algo como

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>

Atualmente, estou trabalhando em um arquivo como este:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 600 600">
...

E eu tentei colocar isso em style.css:

svg {
  background: #bf1f1f;
}

Está funcionando no Chromium e Firefox, mas não acho que seja uma boa prática . O visualizador de imagens EyeOfGnome não a processa e o Inkscape usa um espaço para nome especial para armazenar um plano de fundo:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    version="1.1"
    ...
  <sodipodi:namedview
     pagecolor="#480000" ... >

Bem, parece que o elemento raiz SVG não faz parte dos elementos pintáveis nas recommandações SVG.

Então, eu sugiro usar a solução "correta" fornecida por Robert Longson, porque acho que não é um simples "hack". Parece ser a maneira padrão de definir um plano de fundo com o SVG.

Outra solução alternativa pode ser usar <div>o mesmo tamanho para quebrar o <svg>. Depois disso, você poderá se inscrever "background-color"e "background-image"isso afetará o svg.

<div class="background">
  <svg></svg>
</div>

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>