Why does my SVG have whitespace at the right side in Chrome which I cannot see in Inkscape? How to remove this?

Question

I want to create a horizontal banner with centred text for usage on a public website using Inkscape. How to make the SVG size identical to the background rectangle size and the text centred within this?

I tried to do so via a background rectangle with the text aligned (using the "align and distribute" options). This did not work, apparently the "flowed text only shows up in Inkscape" and is not supported by SVG. The text is not always centred on my responsive bootstrap based website.

I have now applied a background filter as per this advice. This also converts the text to path. This works well except for the fact that there seems to be some white space at the right side of my text within the SVG . Due to this, the banner as a whole is not centred at the page, the text is centred within the part of the SVG that has a background color (that I put there using the filter in stead of using the rectangle). How do I remove this?

Screenshot of the SVG open in Chrome:

I have resized my page to the selection, set the viewbox to "0,0,100,100", cleaned the SVG, saved as plain SVG,... but no solution yet.

This is the intention, but this is a .jpg image, the SVG is more to the left with a lot of whitespace at the right of the image:

This is the SVG:

<svg
   width="344.65631"
   height="40.42527"
   viewBox="0 0 344.65631 40.42527"
   version="1.1"
   id="svg5"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2">
    <filter
       style="color-interpolation-filters:sRGB"
       id="filter11628"
       x="-0.029999999"
       y="-0.050000001"
       width="1.0599999"
       height="1.13">
      <feFlood
         result="result1"
         flood-color="rgb(0,0,0)"
         flood-opacity="1"
         id="feFlood11616" />
      <feImage
         xlink:href=""
         result="result2"
         id="feImage11618" />
      <feBlend
         result="result4"
         in2="result1"
         mode="multiply"
         id="feBlend11620" />
      <feMerge
         result="result3"
         id="feMerge11626">
        <feMergeNode
           in="result1"
           id="feMergeNode11622" />
        <feMergeNode
           in="SourceGraphic"
           id="feMergeNode11624" />
      </feMerge>
    </filter>
  </defs>
  <g
     id="layer1"
     transform="translate(157.26282,153.55087)">
    <g
       id="g1185"
       transform="translate(-62.108309,-238.85639)">
      <g
         id="g11059"
         style="filter:url(#filter11628)"
         transform="translate(-50.165302,17.705401)">
        <text
           xml:space="preserve"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.9333px;line-height:0;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:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="-36.136013"
           y="85.338234"
           id="text11799"><tspan
             id="tspan11797"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.9333px;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:#ffffff;stroke-width:0.264583"
             x="-36.136013"
             y="85.338234">SAMEN IN ACTIE VOOR <tspan
   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.9333px;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:#f7cc26;fill-opacity:1"
   id="tspan34400">OEKRAÏNE</tspan></tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.9333px;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:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.264583"
           x="13.758512"
           y="104.90711"
           id="text1708"><tspan
             id="tspan3424"
             x="13.758512"
             y="104.90711"><tspan
   style="fill:#f7cc26;fill-opacity:1"
   id="tspan7140">GEEF NU</tspan> VIA GIRO 555!</tspan></text>
      </g>
    </g>
  </g>
</svg>

Answer 1

After having a look at your SVG, it seems unnecessarily complex. For future reference, I suggest you try to keep SVGs as simple as possible. SVG effects can sometimes render differently in different browsers, and I suspect SVG effects added using other software might confuse Inkscape. I tend to avoid using SVG effects entirely, unless I really need them, and if I do it's best to keep these to a minimum, and test the SVG in different browsers to prevent any nasty rendering surprises.

Anyway, here's how I suggest you go about it.

1. Create a filled rectangle as your background.

2. Type your text on top of the background. I used two separate text containers for each line of text. I selected some of the text and set the fill to white, and the other letters were selected and the fill set to yellow #f7cc26

3. Select the text in the each text box and centre align the text. I'm not sure if this is 100% necessary, but it may help

4. Use the Alignment tools to make sure everything is centred

5. Select the filled rectangle and do Edit > Resize Page to Selection. This will set the page size to the rectangle.

6. Do File > Save as and choose "Optimised SVG" as the file format

Use the settings shown here in the Save As Optimised SVG dialog

Click to see larger

Here's the resulting SVG ouput

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="91.02mm" height="10.88mm" version="1.1" viewBox="0 0 91.02 10.88" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-12.9 -21.27)">
  <rect x="12.9" y="21.27" width="91.02" height="10.88" stop-color="#000000" stroke-linecap="square" stroke-linejoin="round" stroke-width="12.1" style="paint-order:fill markers stroke"/>
  <text x="58.407238" y="25.659359" font-family="sans-serif" font-size="4.479px" font-weight="bold" letter-spacing="0px" stroke-width=".2646" word-spacing="0px" style="font-variant-ligatures:none;line-height:1.25" xml:space="preserve"><tspan x="58.407238" y="25.659359" stroke-width=".2646" text-align="center" text-anchor="middle"><tspan fill="#ffffff">SAMEN IN ACTIE VOOR</tspan> <tspan fill="#f7cc26">OEKRAÏNE</tspan></tspan></text>
  <text x="58.606274" y="31.036205" font-family="sans-serif" font-size="4.479px" font-weight="bold" letter-spacing="0px" stroke-width=".2646" word-spacing="0px" style="font-variant-ligatures:none;line-height:1.25" xml:space="preserve"><tspan x="58.606274" y="31.036205" stroke-width=".2646" text-align="center" text-anchor="middle"><tspan fill="#f7cc26">GEEF NU</tspan> <tspan fill="#ffffff">VIA GIRO 555!</tspan></tspan></text>
 </g>
</svg>