0

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:

Screenshot of SVG using Chrome dev tools, the picture points at what I think causes the misalignment of the S

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:

centred image as desired but this is using .jpg, I want to make this work using .svg

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>
Improve this question
4
  • 1
    Hi. why have you added all these filters? I don't understand your reasoning. A simple rectangle with a fill and centred text should work just fine. Try this instead, let me know if it works for you. If it does, I can add an answer.
    – Billy Kerr
    Mar 7, 2022 at 19:45
  • Thanks, this works! The rectangle with centred text did not work for me when I tried (multiple times) myself. I used the function "Align and Distribute" under Object in the menu. Have you done something else?
    – Wouter
    Mar 7, 2022 at 20:38
  • 1
    No, I didn't do anything special. It's just basic text over a filled rectangle. The text is however aligned centre within the text box. Not sure if this was your issue. The text alignment shouldn't make a difference.
    – Billy Kerr
    Mar 7, 2022 at 20:51
  • I've added an answer now with the steps I used. Hopefully enough here to help you.
    – Billy Kerr
    Mar 7, 2022 at 21:04

1 Answer 1

Reset to default
2

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

enter image description hereClick 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>
Improve this answer
1
  • Many thanks for this very clear solution, also for all the details about the settings of the optimised SVG, great to know!
    – Wouter
    Mar 8, 2022 at 8:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.