SVG)ブラウザによって表示が変わってしまう

環境
windows10
Microsoft Edge 44.18362.387.0
Microsoft EdgeHTML 18.18362
chrom:77.0.3865.120
firefox:70.0

SVGで図形を作ってそれをページに表示したいのですが、ブラウザによって表示が変わってしまいます。ためしたのはfirefox,micro soft edgeです。

SVG
1(sample.svg)
2<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 64 64" preserveAspectRatio="none" id="svg">
3<path d="M0 64 L32 64 S38 56 24 50 S6 60 0 50 Z" fill="rgb(204, 0, 0, 0.8)"></path>
4 </svg>

SVG
1(bg.svg)
2 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
3 viewBox="0 0 64 64" 
4 preserveAspectRatio="none" id="svg-bg">
5 <path d="M0 64 L64 64 L64 32 S60 30 56 22 S32 30 16 18 S4 30 0 28 Z" fill="rgb(255, 153, 50, 0.7)"></path>
6</svg>

CSS
1body {
2  margin: 0;
3}
4html,
5body,
6#wrap,
7.wrap-sample,
8#top-wrapper {
9  height: 100%;
10}
11
12#wrap {
13  /* position: absolute; */
14  background: url("../_int/bg.svg");
15  background-size: cover;
16  background-repeat: no-repeat;
17}
18.wrap-sample {
19  /* position: relative; */
20  background: url("../_int/sample.svg");
21  background-size: cover;
22  background-repeat: no-repeat;
23}

HTML
1(index.html)
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8" />
6    <link rel="stylesheet" href="styles.css" />
7    <title>Index</title>
8  </head>
9  <body>
10    <div id="top-wrapper">
11      <div class="wrap-sample">
12        <!-- 共通部分 -->
13        <header>
14          <a href="index.html">Top</a>
15          <a href="about.html">About</a>
16          <a href="language.html">Language</a>
17          <a href="contact.html">Contact</a>
18        </header>
19        <!-- 共通部分終了 -->
20        <p>this is index.</p>
21      </div>
22    </div>
23    <div id="content-wrapper">
24      <div class="projects">
25        <div class="box a">A</div>
26        <div class="box b">B</div>
27        <div class="box c">C</div>
28        <div class="box d">D</div>
29      </div>
30    </div>
31  </body>
32</html>
33

よろしくお願いいたします。
追記)問題点
chrom
完成イメージ

firefox
スマホサイズ縦

スマホサイズ横

パソコンサイズ

スマホサイズ横）重ねてあるSVGが表示されない
パソコンサイズ）重ねてあるSVGが表示されない、画像サイズが小さい

kyoya0819

2019/10/23 02:54

どのブラウザでどのように表示が変わりますか？

TAIniko

2019/10/23 03:14

(chrom)では自分の思ったとうりに表示されるのですが、 (firefox)bg.svgのサイズが小さい、sample.svgが表示されない (edge)svg画像の色が指定したいろではなく真っ黒になる、色の指定を＞fill="red"このようにするとちゃんと色が表示されます ※sample.svgとbg.svgのファイル名については追記しておきました

行動規範の内容に同意します

回答3件

cssで bg.svg の指定された E#wrap がHTMLに見つかりませんでしたので、書き換えてみました。

css
1/* #wrap, */
2#top-wrapper {
3  /* position: absolute; */
4  background: url("bg.svg");
5  background-size: cover;
6  background-repeat: no-repeat;
7}
8

当方、確認環境：Chromium（on LaspberryPi）です。

投稿2019/10/30 03:16

AkitoshiManabe

総合スコア5432

TAIniko

2019/10/31 05:02

指摘していただいた個所を修正してみましたが、やはりfirefoxだとうまくいきません。。。ブラウザの幅？を小さくしていくとしたから上に重ねたSVGが出てきました。なので、firefoxではどうやら設定した画像を拡大して表示しているようです。そのためフルスクリーンだと画像の一部分しか見えない。これはどのように解決できますか？

AkitoshiManabe

2019/10/31 05:22

レスポンシブは縦横がライブラリ依存なんですよね。けど、重なり順（zIndex）は弄ってもよさそうに思いました。スマホの回転にも対応するには META[name=viewport]が重要だったんじゃないかな。私がCSSで躓いたときは、関連しそうなプロパティ（他のコメントをも参考にSVGの関連属性も含む）の組み合わせをメモ用紙に書き出して消去法でアナログにチェックしてます。

行動規範の内容に同意します

ブラウザによって表示が変わってしまいます。

の具体的な内容がわからないのですが。
ｓｖｇに、preserveAspectRatio="none"が設定されているため、縦横比を無視して変形してしまう、とかでしょうか？
その場合は、svgタグ内のpreserveAspectRatio="none"を削除すれば、縦横比を維持すると思います。

また、yambejpさんの指摘しているように、色の指定が内容はrgbaなのにrgbとかかれているので、fill="rgba(255, 153, 50, 0.7)"にすると色に関しては変わるかもしれません。

投稿2019/10/23 03:18