Usage of alignment-baseline

[zypah]

Hi, I want to create an SVG with a single letter (well maybe more, if a single line would work, that'd be great)
The letter should be in the middle of the image, vertically and horizontally.

This is my svg

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
	.st0{fill:red;}
	.st1{font-family:'Tahoma';}
	.st2{font-size:14px;}
	.problem{alignment-baseline:central;text-anchor:middle;} 
</style>
<g id="Ebene_1">
	<rect x="0" y="0" class="st0" width="16" height="16"/>
	<text x="8" y="8" class="st1 st2 problem">P</text>
</g>
</svg>

However, when I try to convert it with image magick or inkspace (or just open it in inkscape) the vertical alignment does not work.

Code: Select all

inkscape -z -e test.png -w 1024 -h 1024 test.svg

Version: ImageMagick 7.0.6-0 Q16 x64 2017-06-11

Code: Select all

magick mogrify -size 100x100 -format jpg *.svg

Version 0.91 and 0.92.1pre1 r15355 tested

What can I do to make magick or inkscape understand alignment-baseline:central, or how can I do it without this attribute?

Result is this:



Thanks for you time reading all of this. <3

[snibgo]

Inkscape 0.91 reports:

** (inkscape.exe:6268): WARNING **: Unimplemented style property SP_PROP_ALIGNMENT_BASELINE: value: central

You could write your text in a viewport big enough that it doesn't clip the text, than use IM to "-trim" and add a border or "-extent".

[zypah]

Ahhh great! Thanks a bunch!

I did it this way:

Code: Select all

magick mogrify -format png -size 100x100 *.svg
magick mogrify -fuzz 1% -trim *.png
magick mogrify -gravity center -extent 100x100 *.png

Is there a smarter way? Feels a bit like cheating, but it works at least.

I would be great if the svg would be okay as well. Right now the svg is broken and I can do correct pngs with your trom extent foo.

Result (ignore the colors, they are just there to see the borders better)
Base:

-trim-extend:

[snibgo]

Perhaps you can combine the three command into a single "magick mogrify". But I would do it with "convert". If there is more than one SVG, I'd put the convert in a shell loop.

As far as I know, Inkscape (and any SVG renderer) puts the text at the x,y that you specify. The text alignment properties ("text-anchor", "alignment-baseline" etc) define the meaning of x,y with respect to the text block, not with respect to a container or the overall image.