Text in a shape

[snibgo]

You could make a trial of a font size by extending the heart shape downwards, and testing for the presence of any letters in there. If it contains any letters, the font is too large.

My heart starts and ends at the bottom. It is easily extended by adding a large black rectangle. The image can then be cropped to just that rectangle, and the fx:maximal found. If this isn't black, the font is too large.

[snibgo]

Yes, my suggestion works. Create a trial version of the SVG, called heartTrial.svg. Note the larger dimension, the extra "L" line in the path, and the font-size is "XX".

Code: Select all

<svg xmlns:svg="http://www.w3.org/2000/svg" version="1.2"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="100%" height="100%" viewBox="0 0 900 1300">
  <title>Text in a heart</title>
  <defs>
    <path id="heartPath"
       d="M 434,638
          C 868,183 434,72 434,287
            434,72 0,183 434,638
          L 0,638 0,1238 868,1238 868,638 434,638
          z"
       />
  </defs>
  <use xlink:href="#heartPath"
       fill="black" stroke="none"
       fill-opacity="1" stroke-opacity="0" />
  <flowRoot font-size="XX" text-anchor="middle" >
    <flowRegion>
      <use xlink:href="#heartPath" />
    </flowRegion>
    <flowPara fill="red" fill-opacity="1"
              stroke-opacity="0">The job is easily done with SVG,
 using Inkscape for the rasterization.
 For example, here is an SVG file with a heart path.
 I can use Inkscape directly, or call Inkscape via IM.</flowPara>
  </flowRoot>
</svg>

Change "XX" to "10" (writing the result into ht.svg) and the command ...

Code: Select all

convert ht.svg -crop 868x600+0+638 -format "%%[fx:maxima]" info:

... returns 0. No text has overflowed.

"31" also returns 0. But "32" and "100" return 1, so these font sizes are too large.

EDIT: Thanks to Fred for pointing out that "maximal" in the command happens to work but should be "maxima".

[badabou]

thank you very much for the explanation.

For a long time I did not come to revisit this topic and everything works as expected.

The only problem is that I can not import a font (.ttf) to customize the text.

Do you have any idea ?

[fmw42]

If you have the font on your system, you can just use the full path to the font file including the .ttf suffix.

[badabou]

I want to import a font dynamically.

I tried like this but it does not work :

<svg xmlns:svg="http://www.w3.org/2000/svg" version="1.2"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 800 800">
<title>Text in a heart</title>


<defs>

<style type="text/css">
@font-face {
font-family: testfont;
src: url('KGMissSpeechyIPA.ttf');
}
</style>

<path id="heartPath" fill="none" d="M367.386,236.209C303.31,86.667,121.172,121.558,119.973,295.124c0.664,95.325,86.73,130.957,144.918,169.065
c56.423,36.958,96.58,87.514,102.873,109.036c5.388-21.087,50.116-73.074,102.346-110.07
c57.109-40.452,145.582-73.744,144.917-169.067C613.821,120.092,428.516,92.631,367.386,236.209zM0,572 L 0,572 0,800 800,800 800,572"/>

</defs>

<use xlink:href="#heartPath"
fill="none" stroke="none"
fill-opacity="1" stroke-opacity="0" />

<flowRoot style="font-size:12px;text-align:justify;font-family:testfont;font-weight:normal;line-height:100%;">
<flowRegion>
<use xlink:href="#heartPath" />
</flowRegion>
<flowPara fill="red" fill-opacity="1" stroke-opacity="0">My custom text</flowPara>
</flowRoot>

</svg>

[snibgo]

I suppose you are using Inkscape? According to http://wiki.inkscape.org/wiki/index.php/CSS_Support, it doesn't support @font-face.

As far as I know, Inkscape needs the font to be installed at the OS level. I don't think it can work with specified ttf files.

[badabou]

Well, I'm looking for a way to generate PNG from SVG (from a script). This SVG contains a shape with text inside.

With Inkscape, everything works except that the font can not be customized dynamically.

Do you know a way (another program for example) that do this?

It is necessary that the program supports the tag "flowRoot" and "@ font-face" or a way to set the default font at the time of execution of the program.

Thank you

[badabou]

I have another problem with the alignment of the text.

I try to reproduce the alignment as the first image. The words are automatically cut to keep the shape of the object.

Do you have any idea? Is there a property in SVG code ?

Thank you

IMAGE 1



IMAGE 2

Code: Select all

<svg xmlns:svg="http://www.w3.org/2000/svg" version="1.2"  xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 800 800">

<defs><path id="heartPath" fill="none" d="M285 85C251.027 3.42297 146.84 -23.1268 75 24.0787C36.6194 49.2982 14.0911 93.1698 4.42438 137C-19.2116 244.168 48.5056 344.488 117.91 419C136.693 439.164 157.191 457.749 179 474.65C203.401 493.56 228.854 511.008 256 525.769C263.828 530.026 276.745 539.998 286 539.397C292.967 538.944 301.879 532.509 308 529.297C325.954 519.876 343.158 509.282 360 497.999C432.582 449.373 498.491 379.985 538.742 302C575.088 231.581 584.309 145.579 542.548 75C504.563 10.8028 419.395 -21.7473 351 15.3087C321.005 31.5596 301.971 56.2227 285 85z"/></defs>

<flowRoot style="font-size:26px;fill:#ffffff;font-weight:normal;line-height:100%;">
   <flowRegion><use xlink:href="#heartPath"/></flowRegion>
   <flowPara>a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example  a text for example </flowPara>
</flowRoot>

</svg>

[snibgo]

See the SVG documentation http://www.w3.org/TR/2004/WD-SVG12-20041027/flow.html for how to justify text.

[snibgo]

If you want to allow words to be broken, you can insert a space character between all the characters of every word. For example, the hair space U+200A:

Code: Select all

a t e x t f o r e x a m p l e  a 

The zero-width space U+200B might be better.

[badabou]

If you want to allow words to be broken, you can insert a space character between all the characters of every word. For example, the hair space U+200A:

Code: Select all

a t e x t f o r e x a m p l e  a 

The zero-width space U+200B might be better.

Thank you very much snibgo , you are the best, it works perfectly!