svg画像の右端に余白ができてしまう

前提・実現したいこと

Inkscapeというソフトでsvgファイルを作成しています。
作成したsvgファイルをブラウザ上で確認すると、画像の右に余白ができてしまっているようです。
余白をなくしたいのですが、どうすればよいでしょうか？

（例）
灰色の「123456789」と緑色の「123456789」を重ねています。
「9」の右に不要な余白ができてしまっています。

該当のソースコード

svg
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<svg
3   xmlns:dc="http://purl.org/dc/elements/1.1/"
4   xmlns:cc="http://creativecommons.org/ns#"
5   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
6   xmlns:svg="http://www.w3.org/2000/svg"
7   xmlns="http://www.w3.org/2000/svg"
8   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
9   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
11   sodipodi:docname="描画.svg"
12   id="svg8"
13   version="1.1"
14   viewBox="0 0 88.334709 10.861678"
15   height="10.861678mm"
16   width="88.334709mm">
17  <defs
18     id="defs2">
19    <rect
20       id="rect18"
21       height="87.690475"
22       width="108.85714"
23       y="92.98214"
24       x="21.922619" />
25  </defs>
26  <sodipodi:namedview
27     fit-margin-bottom="0"
28     fit-margin-right="0"
29     fit-margin-left="0"
30     fit-margin-top="0"
31     inkscape:window-maximized="0"
32     inkscape:window-y="38"
33     inkscape:window-x="0"
34     inkscape:window-height="997"
35     inkscape:window-width="2138"
36     showgrid="false"
37     inkscape:document-rotation="0"
38     inkscape:current-layer="layer1"
39     inkscape:document-units="mm"
40     inkscape:cy="-16.686074"
41     inkscape:cx="194.87371"
42     inkscape:zoom="1.979899"
43     inkscape:pageshadow="2"
44     inkscape:pageopacity="0.0"
45     borderopacity="1.0"
46     bordercolor="#666666"
47     pagecolor="#ffffff"
48     id="base" />
49  <metadata
50     id="metadata5">
51    <rdf:RDF>
52      <cc:Work
53         rdf:about="">
54        <dc:format>image/svg+xml</dc:format>
55        <dc:type
56           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
57        <dc:title></dc:title>
58      </cc:Work>
59    </rdf:RDF>
60  </metadata>
61  <g
62     transform="translate(-25.463933,-106.42367)"
63     id="layer1"
64     inkscape:groupmode="layer"
65     inkscape:label="レイヤー 1">
66    <g
67       id="g92">
68      <text
69         id="text12-4-67-1-1"
70         y="117.05109"
71         x="23.631144"
72         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.1111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:0.264583"
73         xml:space="preserve"><tspan
74           y="117.05109"
75           x="23.631144"
76           sodipodi:role="line"
77           id="tspan86">123456789</tspan></text>
78      <text
79         xml:space="preserve"
80         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14.1111px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.264583"
81         x="24.432932"
82         y="116.91743"
83         id="text12-7"><tspan
84           y="116.91743"
85           x="24.432932"
86           sodipodi:role="line"
87           id="tspan84">123456789</tspan></text>
88    </g>
89  </g>
90</svg>
91

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

回答2件

画像はおそらくSVG画像単体をGoogle Chromeで開いたものだと思いますが、オレンジ色の余白はSVG画像の外部にある余白を表しています。
SVG画像自体が余白の情報を持っているわけではなく、SVG画像単体を表示するのにブラウザが設けた余白なので問題ありません。
単体での表示ではなく実際に<object>タグや<img>タグでSVG画像を読み込めば余白は無いはずです。

投稿2020/06/11 13:29

reosablo

総合スコア339

rdt

2020/06/11 13:41

ご回答ありがとうございます。「9」の右にある青色部分の余白が気になっていました。特にスマートフォンで表示した際に余白が大きくなります。いろいろと試したところ、「123456789」を<text>タグで指定しているためブラウザによって表示が異なるのかなと思いました。文字をアウトライン化してsvgファイルを作成したら、余白は消えました。