Eu estou trabalhando em um design responsivo que requer o gráfico de cabeçalho para dimensionar com a largura da viewport. Eu fui para um svg pensando que isso iria escalar bem. (Eu testei para o suporte a svg no site completo e substitua um gif pelo svg). No Firefox (13.0 no Windows 7) não é antialiasing em tamanhos pequenos. Ocasionalmente parece bom em alguns tamanhos, e faz se eu corrigir as dimensões, mas eu quero evitar fazer isso. Chrome e Safari fazem anti-alias a imagem, e parece ser bom.

Estou definindo obackground-size: 100% 100% para escalar para o contêiner, eu tentei coisas comocover também, mas parece não fazer diferença.

Eu tentei adicionarimage-rendering: optimizeQuality; também, mas isso não parece ter ajudado.

Eu configurei uma página de teste emhttp://axminster.digital.linneydesign.com/svg/ - a parte superior é a imagem de fundo, e a que está abaixo é exatamente o mesmo arquivo, mas adicionada diretamente no html como umimg. Dimensionando o navegador para tamanhos pequenos, você verá o primeiro pixelado, mas o de baixo ficará suave.

Alguma idéia de como eu posso suavizar essa imagem de fundo sem fixar suas dimensões?

obrigado.