[Tutorial] Convert TEXT to SVG IMAGE with Inkscape

[GrannyGrump]

A Mini-tutorial inspired by a Wikimedia article: http://commons.wikimedia.org/wiki/He...t_and_Inkscape


Usually, text is best represented as text, because it enables users to search, copy, and edit.

Sometimes your ebook has text that needs special fonts, such as math equations, foreign language quotations, or even just a fancy display font. But maybe you can't embed that special font because the license won't allow it, or the reading device won't support it.

A Scalable Vector Graphic is the next best thing to the font itself – the image can be scaled large or small with no loss of quality.

Note that not all reader devices/software support SVG.


YOU WILL NEED:
-- Inkscape, a free and open source vector drawing program http://www.inkscape.org/en/ . Get the portable version and you can run it from anywhere.

-- (optional) A text editor to display the text and font you are working with.

--
TIP: You don't always have to install fonts you're working with if you only have a temporary requirement. Most programs, including Inkscape, can utilize fonts that are simply loaded into memory. Load fonts by opening them with the Windows Font Viewer (should be offered on right-click Open With...), or use a font manager with the ability to load them, such as Nexus Font: http://xiles.net/nexusfont/.


THE PROCEDURE:

1.-- LAUNCH INKSCAPE, with a new document.

Note on navigating the editing window:
Mouse wheel scrolls up/down;
SHIFT + Mouse wheel scrolls left/right;
CTRL + mouse wheel zooms the window;
SHIFT + Right-button-drag pans the window.


2.-- CREATE THE TEXT:
-- On the left toolbar, click the large "A" icon, "Create and edit text objects" [or press F8].

-- Click in the editing window, and type or paste desired text.

-- The text should be surrounded by a dotted marquee.

(click to enlarge)


3.-- SELECT THE TEXT OBJECT:
If the dotted selection marquee has disappeared after typing, editing, or other mouse activty:
-- Choose menu EDIT -> Select All [or CTRL + A]; this should display the marquee.


(click to enlarge)


4.-- FORMATTING:
(This is a very brief overview of some of the possible formatting; see the Inkscape user's manual for more.)
Remember, to apply formatting; the text must be selected (dotted selection marquee must be visible); use the "Select All" command as needed.

Additionally, you can click and drag to highlight individual words or characters within the selection, and apply specific formatting to the highlighted bits only.

4a.-- SET THE FONT AND FONT-SIZE:
-- Choose menu TEXT -> Text and font... ; or click the large "T" icon on the right-hand toolbar, or press SHIFT + CTRL + T.

(click to enlarge)

-- The dialog provides formatting options:

-- Use the "Font" tab to choose the desired font name, style, size, alignment, line-height.
-- Use the "Text" tab to edit the actual text (add or delete text, spaces, line feeds).
-- Click "Apply" when ready. (It seems to be a long delay until the "apply" button becomes active; this may be computer-related.)

(click to enlarge)

4b.-- (optional) Apply fill color:
-- Default colors can be chosen from the pallet at the bottom of the window.
-- To create a custom color: select menu OBJECT -> Fill and stroke, or Shift + Ctrl + F, or click the small "Fill:" field in bottom left corner; then use the Fill tab to create colors. Remember that some shades may be hard to read when they are converted on a grey-scale device.


5.-- (optional) Set the default display size:
For simple text fragments in ebooks, this step should not be necessary, but is included here for informational purposes.

-- With the dotted marquee displayed; at top of the left toolbar, click the "arrow" icon [or F1]. A number of arrow-handles surround the dotted marquee.

(click to enlarge)

-- To resize the text, hold down the "Ctrl" key and drag the handles to resize text as desired. The Ctrl key keeps aspect ratio intact and prevents distortion.
-- To move the object, CTRL + click-and-drag inside the marquee.

(click to enlarge)


6.-- RESIZE THE PAGE TO FIT:
--Select menu FILE -> Document Properties... [or SHIFT + CTRL + D].

(click to enlarge)

-- Click the button "Resize page to content..." The caption changes to "Resize page to drawing or selection". Click again to auto-crop the selected text object.

(click to enlarge)


7.-- CONVERT TO PATH:
Choose menu PATH -> Object to Path, [or SHIFT + CTRL + C].
This converts the text object into "paths": the text becomes an image. If you don't do this, readers will only be able to see the SVG properly if they have that font installed.

(click to enlarge)


8.-- SAVE THE FILE:
Choose menu FILE -> Save As [or SHIFT + CTRL + S], and save your new svg file with desired filename. To prevent compatibility problems, be sure to save as "Plain SVG", not as "Inkscape SVG".


THE RESULT:
Now you have an SVG image replica of your special text, which can be scaled up and down nicely. Style the <height:> to size in ems, so it will resize in synch with surrounding text.

Vertical alignment of inline images might not line up perfectly smoothly with surrounding text, but neither would any other image, and svg will give a better appearance overall. Try tweaking the "vertical-align:" styling for better results.

The screenshot shows two fragments of Greek text, and a bit of blackletter.

(click to enlarge)


Example code:

Spoiler:

/* the css*/
/*The div must set centering, not the img class*/

.svgDiv {
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
margin-top: 2.0em;
margin-bottom: 1.0em;
text-indent: 0;
text-align: center;
page-break-inside: avoid;
}
.svgBlock {
height: 2.25em;
max-width: 100%;
}
.svgInline {
vertical-align: bottom;
height: 1.10em;
}

/*the html*/

<p>‘Yet it is not the old imperious god of the fatal bow – <img alt="Erôs anikate machan" class="svgInline" src="../Images/greekA.svg"/> – not that – nor even the placid respectable <img alt="storge" class="svgInline" src="../Images/greekB.svg"/> – but something still unnamed, perhaps more mysterious, more divine! Only one must stoop to see it, old fellow, one must stoop!’</p>

<p>...........................</p>

<p>... and who shall dare to play Rhadamanthus, to appraise the record, and to decide how much of it is solid achievement, and how much the merest child’s play?</p>

<div class="svgDiv">
<img alt="The End" class="svgBlock" id="end00" src="../Images/end00.svg"/>
</div>

================

Ok, all done. I hope you found this useful.

[RbnJrg]

Congratulations Granny! Very good and perfectly clear all explanations; nothing to add them But in order to your issues to "vertical-align" images, you can get perfect results by setting "percentages" (positives or negatives) as a value for the property. For example:

.svgInline {
   vertical-align: -0.1%;
   height: 1.10em;
}

You also could try with "vertical-align: text-bottom" instead of "vertical-align: bottom" but in the case you presented practically is the same. Also could be a very good idea to use "pixels" as measurement:

.svgInline {
   vertical-align: -5px; /* values also can be positives */
   height: 1.10em;
}

But regarding the tutorial you made, just one word: perfect!

Regards
Rubén

[roger64]

Wow! You've reached the top professional level!

[GrannyGrump]

Why, thank you, kind folks, for the compliments!


@Ruben, funny, but I've used percentages with success to adjust alignment on superscripts, but it didn't want to work for me on this little test. I'll give that another try, maybe I wasn't aggressive enough. Would pixels work sizing with ems and the font size set very large or very tiny? I need to play with that a bit.

Thanks for the tips!

[Turtle91]

lol
That thread was only 10 years and 3 days old!!

[Quoth]

I assume a new poster with one post only and a URL is really some sort of spammer.

Also ANY online tool has privacy & safety issues compared with widely recognised local tools.

The OP is about Inkscape, which is still a good package.

[j.p.s]

Originally Posted by Quoth

I assume a new poster with one post only and a URL is really some sort of spammer.

But do you report such posts so that a moderator can do something about it?

[Karellen]

Yea, probably a spammer promoting a paid service.
But I am glad this old thread was bumped. I just learnt something new from the OP!!
No need to insert a font file just to display a non-standard symbol or two.

[DNSB]

Originally Posted by Karellen

Yea, probably a spammer promoting a paid service.
But I am glad this old thread was bumped. I just learnt something new from the OP!!
No need to insert a font file just to display a non-standard symbol or two.

I used this technique a couple of times to insert Enochian text in Terry Pratchett's books (it's the language used by the golems).

[Quoth]

Originally Posted by j.p.s

But do you report such posts so that a moderator can do something about it?

Almost always.

[Turtle91]

I just used this! I made a simple svg to look like a wax seal on a letter (like they used to do in the old days). It only took a couple minutes and it made that little section of the book 'pop'. Not at all required, but it was easy, a little bit of fun, and looks better than just a basic 'FJF' !

[RbnJrg]

Originally Posted by Turtle91

I just used this! I made a simple svg to look like a wax seal on a letter (like they used to do in the old days). It only took a couple minutes and it made that little section of the book 'pop'. Not at all required, but it was easy, a little bit of fun, and looks better than just a basic 'FJF' !

There was another great tutorial from Granny:

https://www.mobileread.com/forums/sh...d.php?t=233131

This is specially useful if you want to use a svg divider or fleuron (or any other image).

[Karellen]

Originally Posted by RbnJrg

There was another great tutorial from Granny:

https://www.mobileread.com/forums/sh...d.php?t=233131

This is specially useful if you want to use a svg divider or fleuron (or any other image).

Oh, that is great. Thanks.

I just tried it on a snowflake image. (image below) Followed the steps and it worked perfectly. (resulting code in spoiler)

Spoiler:

PHP Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   version="1.1"
   id="svg9"
   width="1858.5187"
   height="2129.7344"
   viewBox="0 0 1858.5187 2129.7344"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs13" />
  <g
     id="g15"
     transform="translate(-366.90568,-213.58355)">
    <path
       style="fill:#000000"
       d="m 1289.5,2342.9074 c -17.4137,-2.1461 -33.5538,-13.7591 -41.0006,-29.5003 -5.725,-12.1015 -5.4632,-1.4692 -5.482,-222.6571 -0.01,-112.0625 -0.1964,-203.75 -0.4152,-203.75 -0.2188,0 -39.9313,39.503 -88.25,87.7845 -48.3187,48.2814 -89.9116,89.4467 -92.4287,91.4783 -15.2661,12.3217 -38.9926,14.1684 -57.3303,4.4622 -7.7972,-4.1271 -17.19332,-13.5253 -21.32347,-21.3282 -8.94331,-16.8962 -8.0165,-38.636 2.31106,-54.2097 1.99367,-3.0064 58.63531,-60.3235 130.47121,-132.027 L 1243,1736.446 v -182.723 c 0,-100.4976 -0.1727,-182.723 -0.3837,-182.723 -0.3753,0 -42.1704,24.0332 -139.6163,80.2829 -26.675,15.3978 -76.625,44.2057 -110.99996,64.0175 -34.375,19.8118 -63.23937,36.6502 -64.14304,37.4187 -0.90368,0.7685 -2.36262,4.1836 -3.2421,7.5891 -1.46395,5.6687 -4.77652,18.1581 -9.59918,36.1918 -1.02958,3.85 -12.74354,47.5 -26.03101,97 -13.28747,49.5 -27.28657,101.7 -31.10912,116 -3.82254,14.3 -7.80418,29.15 -8.8481,33 -1.04391,3.85 -4.86558,18.25 -8.49259,32 -7.72469,29.2843 -10.36071,35.2929 -19.53486,44.5281 -11.31027,11.3856 -25.08208,16.6996 -40.5,15.6275 -19.21908,-1.3364 -34.96269,-11.5026 -43.65175,-28.1872 -4.29239,-8.2422 -5.84825,-14.8821 -5.84825,-24.9584 0,-7.7286 0.92838,-11.6859 15.83752,-67.51 1.10168,-4.125 6.08498,-22.8 11.07399,-41.5 4.98901,-18.7 9.72101,-36.25 10.51554,-39 5.06108,-17.5173 27.67733,-103.7289 27.3084,-104.0979 -0.38891,-0.3889 -89.94853,50.9655 -182.73545,104.7823 -52.83238,30.643 -161.45137,93.1851 -167.54973,96.474 -30.52176,16.4607 -66.9817,0.9998 -76.85392,-32.5899 -3.63904,-12.3816 -1.28522,-28.6672 5.92033,-40.9616 5.90989,-10.0837 12.67434,-15.1912 44.05794,-33.2655 40.38171,-23.2565 135.12713,-77.9292 157.92538,-91.1305 10.45,-6.0511 51.4,-29.652 91,-52.4464 39.6,-22.7944 72.64239,-42.0623 73.42754,-42.8177 1.23672,-1.1897 1.23672,-1.4415 0,-1.8832 -1.46391,-0.5229 -60.98307,-16.4989 -114.42754,-30.7144 -16.5,-4.3888 -32.25,-8.6019 -35,-9.3625 -2.75,-0.7607 -18.725,-5.0395 -35.5,-9.5085 -16.775,-4.469 -32.75,-8.7586 -35.5,-9.5324 -2.75,-0.7737 -8.59204,-2.3519 -12.98231,-3.5069 -19.53039,-5.1383 -32.49612,-15.6969 -39.03429,-31.7875 -5.96228,-14.6732 -5.45636,-29.5446 1.48764,-43.7283 9.14204,-18.6733 26.51259,-29.4334 47.48906,-29.4167 7.66671,0.01 11.74836,0.8512 36.0399,7.4626 26.97444,7.3416 56.7494,15.3011 73,19.5145 3.85,0.9982 61.04076,16.3051 127.09058,34.0153 l 120.09058,32.2005 48.40942,-27.9416 c 26.62518,-15.3678 71.80942,-41.4535 100.40938,-57.9682 28.6,-16.5147 70.9,-40.9387 94,-54.2755 23.1,-13.3369 43.8,-25.3061 46,-26.5983 2.2,-1.2921 9.0573,-5.1768 15.2385,-8.6325 6.1812,-3.4558 11.1012,-6.7332 10.9332,-7.2832 -0.2423,-0.7936 -88.4902,-52.1729 -162.1717,-94.4189 -6.6,-3.7842 -18.75,-10.805 -26.99996,-15.6019 -84.63772,-49.2115 -126.07912,-72.5947 -127.92866,-72.1834 -1.13924,0.2534 -7.24634,1.8647 -13.57134,3.5808 -21.70098,5.8877 -49.50308,13.365 -54.5,14.6576 -4.8332,1.2502 -45.82123,12.1868 -56,14.9422 -14.58548,3.9482 -47.27461,12.7193 -56,15.0258 -5.5,1.4538 -12.25,3.2482 -15,3.9875 -2.75,0.7393 -37.175,9.9967 -76.5,20.5719 -78.74433,21.1757 -81.6375,21.7363 -95.46898,18.4975 -25.83273,-6.0491 -43.66207,-32.3718 -39.61112,-58.4808 2.1682,-13.9744 8.94878,-25.9757 19.29763,-34.156 8.3704,-6.6164 12.2586,-8.1709 35.78247,-14.3057 5.225,-1.3626 50,-13.3523 99.5,-26.6438 49.5,-13.2914 92.475,-24.7995 95.5,-25.5734 18.00164,-4.6058 26.49873,-7.1647 26.48936,-7.9772 -0.0104,-0.8994 -22.06437,-13.7327 -209.98936,-122.19329 C 423.5309,835.91468 419.24546,833.44373 402.5873,823.89883 c -14.77525,-8.46602 -23.17119,-15.64615 -28.07058,-24.00569 -16.67859,-28.45768 -4.70716,-64.20378 25.63038,-76.53102 11.07226,-4.49907 26.76217,-4.78815 37.77117,-0.69592 3.97616,1.478 22.4937,11.90552 68.08177,38.33791 6.325,3.6673 52.45,30.30261 102.5,59.18958 50.05,28.88697 112.55058,64.9727 138.89019,80.19052 26.3396,15.21781 48.09434,27.46459 48.34386,27.21507 0.24953,-0.24952 -10.01247,-39.52394 -22.80443,-87.27648 -31.49507,-117.57141 -32.29186,-120.55723 -37.92933,-142.13204 -5.86484,-22.44494 -5.42815,-33.67012 1.85531,-47.69076 13.47527,-25.93986 45.49222,-35.90082 71.55133,-22.2607 8.24426,4.31529 18.50133,14.77329 22.4303,22.8697 2.53835,5.23077 9.0808,27.95094 17.67801,61.391 0.70701,2.75 3.77663,14.225 6.82139,25.5 3.04476,11.275 6.42754,23.875 7.5173,28 1.08976,4.125 12.85077,48 26.13558,97.5 13.28481,49.5 24.99659,93.15 26.02617,97 4.82266,18.03374 8.13523,30.5231 9.59918,36.19181 0.87948,3.40549 2.33842,6.82839 3.2421,7.60649 0.90367,0.7781 36.06804,21.242 78.143,45.4754 42.075,24.2335 83.25,47.98 91.5,52.7702 40.2259,23.3561 144.6996,83.4561 145.0744,83.4561 0.2341,0 0.4256,-82.2264 0.4256,-182.7254 V 820.54913 L 1115.5025,693.02457 c -70.1236,-70.13851 -128.69888,-129.2991 -130.16738,-131.46796 -4.23596,-6.25619 -7.60011,-17.09096 -8.09045,-26.05661 -0.84009,-15.36051 4.42734,-29.17166 15.25552,-39.99985 10.25881,-10.2588 23.00011,-15.52259 37.45991,-15.4757 9.7051,0.0315 14.8005,1.23748 24.0399,5.68991 7.2611,3.4991 10.383,6.4919 98,93.94674 49.775,49.68288 90.6062,90.33395 90.736,90.33571 0.1299,0.002 0.3549,-93.03431 0.5,-206.74681 l 0.264,-206.75 2.4694,-7 c 11.5098,-32.62665 50.1118,-46.05711 79.0342,-27.49767 6.5937,4.23113 14.8686,13.33873 18.2147,20.04754 6.1569,12.34414 5.7817,-2.10412 5.7817,222.66023 0,112.90944 0.3318,205.2899 0.7373,205.2899 0.4056,0 41.6931,-40.89279 91.75,-90.87287 84.8073,-84.67698 91.4559,-91.07732 97.5127,-93.87141 21.4426,-9.89171 44.3231,-6.05451 60.609,10.1645 11.0307,10.98543 15.6291,22.05665 15.6291,37.62874 0,9.46108 -1.4965,15.34782 -6.4701,25.45104 -2.5989,5.27919 -18.38,21.4385 -131.3609,134.50904 L 1349,821.51809 V 1003.759 c 0,100.2326 0.3447,182.241 0.766,182.241 0.4213,0 5.4838,-2.7475 11.25,-6.1056 16.2731,-9.4769 29.0324,-16.8492 126.484,-73.082 50.05,-28.8806 100.675,-58.1199 112.5,-64.9764 11.825,-6.8564 31.175,-18.0163 43,-24.7998 11.825,-6.7834 21.8188,-12.6079 22.2086,-12.9434 0.5645,-0.486 16.1326,-57.89223 43.8224,-161.5928 1.028,-3.85 4.4083,-16.45 7.5118,-28 3.1034,-11.55 6.2272,-23.25 6.9417,-26 0.7145,-2.75 4.9871,-18.725 9.4948,-35.5 4.5077,-16.775 8.7772,-32.75 9.4878,-35.5 0.7106,-2.75 3.5564,-13.325 6.324,-23.5 2.7675,-10.175 6.2078,-22.92717 7.645,-28.33815 1.4373,-5.41099 3.5534,-11.71099 4.7026,-14 11.0669,-22.04392 35.8232,-33.7681 59.5091,-28.18252 10.3783,2.44741 17.2245,6.29449 25.1016,14.10531 7.9071,7.84055 11.9317,15.00195 14.8336,26.39537 2.574,10.106 1.5325,17.10449 -7.593,51.01999 -4.5135,16.775 -8.7879,32.75 -9.4986,35.5 -0.7106,2.75 -3.7833,14.225 -6.828,25.5 -3.0448,11.275 -6.4893,24.1 -7.6545,28.5 -2.9229,11.03744 -5.0461,18.96752 -19.9349,74.45285 -7.1509,26.64906 -12.834,48.62045 -12.6292,48.82531 0.2962,0.29616 78.2008,-44.42439 182.5552,-104.79445 15.0177,-8.68787 140.3483,-80.9728 158.6861,-91.52281 16.4924,-9.48835 23.1709,-11.68966 35.3482,-11.65112 39.016,0.12349 64.019,40.5761 46.9173,75.90807 -7.2949,15.07135 -7.0248,14.87973 -81.4418,57.78215 -36.2524,20.9 -70.6601,40.74341 -76.4616,44.09646 -5.8015,3.35306 -45.6482,26.34607 -88.5482,51.09559 -70.9755,40.94658 -97.448,56.26025 -116.8009,67.56635 -3.7405,2.1853 -6.5267,4.2473 -6.1916,4.5824 0.3351,0.3351 12.1705,3.6866 26.3009,7.4477 14.1304,3.7611 39.1916,10.4488 55.6916,14.8616 16.5,4.4128 32.25,8.6038 35,9.3133 2.75,0.7095 16.025,4.2529 29.5,7.8743 13.475,3.6215 28.1,7.5417 32.5,8.7118 4.4,1.17 10.925,2.9501 14.5,3.9558 3.575,1.0057 16.175,4.4042 28,7.5523 24.4526,6.5099 30.337,9.0825 38.8929,17.0037 31.0647,28.7605 18.0068,79.5354 -23.1682,90.0884 -10.8943,2.7922 -20.4978,1.5283 -50.7247,-6.6759 -14.575,-3.956 -28.75,-7.7754 -31.5,-8.4878 -2.75,-0.7123 -18.725,-4.9867 -35.5,-9.4985 -16.775,-4.5119 -32.75,-8.7911 -35.5,-9.5092 -2.75,-0.7182 -15.35,-4.076 -28,-7.4617 -12.65,-3.3858 -26.15,-6.9898 -30,-8.0091 -3.85,-1.0192 -18.025,-4.8328 -31.5,-8.4748 -13.475,-3.6419 -29.45,-7.9218 -35.5,-9.5108 -6.05,-1.589 -28.6871,-7.644 -50.3046,-13.4555 -21.6175,-5.8115 -39.6514,-10.5664 -40.0752,-10.5664 -0.7292,0 -20.5582,11.3646 -94.6202,54.2294 -17.6,10.1864 -58.325,33.7082 -90.5,52.2707 -32.175,18.5625 -65.25,37.6467 -73.5,42.4092 -8.25,4.7625 -24.3319,14.0437 -35.7376,20.6249 -11.4056,6.5812 -20.7431,12.4243 -20.75,12.9847 -0.01,0.5603 15.1751,9.7597 33.7376,20.4431 18.5625,10.6833 40.5,23.3306 48.75,28.1051 8.25,4.7745 62.925,36.3361 121.5,70.1369 58.575,33.8008 107.4499,62.0517 108.611,62.7797 2.1998,1.3795 2.3979,1.3494 15.889,-2.4097 2.75,-0.7663 16.25,-4.3936 30,-8.0607 13.75,-3.6672 28.15,-7.5161 32,-8.5532 6.9582,-1.8743 53.6219,-14.3697 67,-17.9409 3.85,-1.0277 47.5,-12.7338 97,-26.0134 49.5,-13.2797 94.1681,-25.2386 99.2625,-26.5754 22.6737,-5.9495 42.8452,-0.6708 56.8162,14.8683 15.4603,17.1957 17.8368,42.9294 5.8048,62.8583 -4.0548,6.7161 -13.0441,15.2917 -19.9389,19.0211 -2.7231,1.473 -8.3246,3.6307 -12.4479,4.7949 -7.9738,2.2515 -177.5557,47.805 -199.4967,53.5893 -31.8734,8.4028 -37.9806,10.1915 -37.6842,11.037 0.3161,0.9019 29.9488,18.2059 128.1842,74.8535 28.875,16.6509 70.275,40.5344 92,53.0747 21.725,12.5402 44.675,25.7843 51,29.4314 94.203,54.3187 90.3881,51.697 97.9464,67.3124 14.0614,29.0509 -0.6362,64.004 -30.9464,73.5953 -10.5011,3.323 -25.0937,3.0029 -34.9485,-0.7665 -3.9898,-1.5261 -49.1014,-27.2397 -118.0515,-67.2894 -17.3733,-10.0912 -126.3026,-72.9658 -202.5,-116.884 -8.25,-4.7551 -19.8618,-11.4596 -25.8039,-14.8989 -5.9422,-3.4393 -10.9884,-6.0689 -11.2138,-5.8434 -0.2255,0.2254 5.4467,22.2137 12.6048,48.8628 7.1581,26.649 13.8596,51.6028 14.8923,55.4528 1.0326,3.85 3.953,14.875 6.4897,24.5 2.5367,9.625 6.2253,23.35 8.1969,30.5 1.9716,7.15 4.1639,15.25 4.8718,18 0.7079,2.75 4.9707,18.725 9.4729,35.5 4.8579,18.1003 8.3966,33.354 8.7043,37.52 1.409,19.0768 -10.9609,40.5178 -28.477,49.3599 -17.0657,8.6147 -38.6195,7.6004 -53.524,-2.5189 -6.8485,-4.6497 -14.511,-13.2033 -17.7845,-19.8527 -2.9697,-6.0323 -7.5112,-22.205 -31.4534,-112.0083 -3.6659,-13.75 -7.0302,-26.35 -7.4763,-28 -0.4461,-1.65 -4.4262,-16.5 -8.8447,-33 -4.4185,-16.5 -12.0767,-45.075 -17.0181,-63.5 -4.9414,-18.425 -13.985,-52.1688 -20.0969,-74.9863 -6.1119,-22.8174 -11.4338,-41.7539 -11.8264,-42.0812 -0.3925,-0.3272 -7.2387,-4.3493 -15.2137,-8.938 -7.975,-4.5887 -19.9,-11.4782 -26.5,-15.31 -6.6,-3.8318 -48.675,-28.1055 -93.5,-53.9415 -44.825,-25.8361 -91.4,-52.723 -103.5,-59.7487 -12.1,-7.0257 -23.575,-13.6723 -25.5,-14.7702 -1.925,-1.0978 -13.7281,-7.9079 -26.2291,-15.1335 -12.501,-7.2255 -23.4135,-13.4 -24.25,-13.721 -1.3578,-0.521 -1.5209,18.975 -1.5209,181.7644 v 182.3479 l 128.3574,128.5091 c 89.5975,89.7034 129.1282,129.9328 130.9101,133.2242 7.2904,13.4659 9.0755,29.32 4.8254,42.8569 -8.2534,26.2881 -36.9429,42.3273 -63.3897,35.4388 -14.7306,-3.8368 -10.7092,-0.2078 -108.7106,-98.1023 -49.7791,-49.7247 -90.8416,-90.4086 -91.25,-90.4086 -0.4084,0 -0.7426,92.3805 -0.7426,205.2899 0,178.5853 -0.1937,206.0336 -1.4891,211.0069 -6.811,26.1491 -31.3398,42.8977 -58.0109,39.6106 z"
       id="path179" />
  </g>
</svg>

One thing I am not sure about...
When using the svg image in an epub, how do you figure out the correct size. This image is very large, so how do I figure out sizing so it is the equivelant of 1em in the epub and matches the rest of the text sizing, and also how do you ensure it resizes if a user increases font size in their ereader?

.

[RbnJrg]

Originally Posted by Karellen

Oh, that is great. Thanks.

I just tried it on a snowflake image. (image below) Followed the steps and it worked perfectly. (resulting code in spoiler)

Spoiler:

PHP Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   version="1.1"
   id="svg9"
   width="1858.5187"
   height="2129.7344"
   viewBox="0 0 1858.5187 2129.7344"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs13" />
  <g
     id="g15"
     transform="translate(-366.90568,-213.58355)">
    <path
       style="fill:#000000"
       d="m 1289.5,2342.9074 c -17.4137,-2.1461 -33.5538,-13.7591 -41.0006,-29.5003 -5.725,-12.1015 -5.4632,-1.4692 -5.482,-222.6571 -0.01,-112.0625 -0.1964,-203.75 -0.4152,-203.75 -0.2188,0 -39.9313,39.503 -88.25,87.7845 -48.3187,48.2814 -89.9116,89.4467 -92.4287,91.4783 -15.2661,12.3217 -38.9926,14.1684 -57.3303,4.4622 -7.7972,-4.1271 -17.19332,-13.5253 -21.32347,-21.3282 -8.94331,-16.8962 -8.0165,-38.636 2.31106,-54.2097 1.99367,-3.0064 58.63531,-60.3235 130.47121,-132.027 L 1243,1736.446 v -182.723 c 0,-100.4976 -0.1727,-182.723 -0.3837,-182.723 -0.3753,0 -42.1704,24.0332 -139.6163,80.2829 -26.675,15.3978 -76.625,44.2057 -110.99996,64.0175 -34.375,19.8118 -63.23937,36.6502 -64.14304,37.4187 -0.90368,0.7685 -2.36262,4.1836 -3.2421,7.5891 -1.46395,5.6687 -4.77652,18.1581 -9.59918,36.1918 -1.02958,3.85 -12.74354,47.5 -26.03101,97 -13.28747,49.5 -27.28657,101.7 -31.10912,116 -3.82254,14.3 -7.80418,29.15 -8.8481,33 -1.04391,3.85 -4.86558,18.25 -8.49259,32 -7.72469,29.2843 -10.36071,35.2929 -19.53486,44.5281 -11.31027,11.3856 -25.08208,16.6996 -40.5,15.6275 -19.21908,-1.3364 -34.96269,-11.5026 -43.65175,-28.1872 -4.29239,-8.2422 -5.84825,-14.8821 -5.84825,-24.9584 0,-7.7286 0.92838,-11.6859 15.83752,-67.51 1.10168,-4.125 6.08498,-22.8 11.07399,-41.5 4.98901,-18.7 9.72101,-36.25 10.51554,-39 5.06108,-17.5173 27.67733,-103.7289 27.3084,-104.0979 -0.38891,-0.3889 -89.94853,50.9655 -182.73545,104.7823 -52.83238,30.643 -161.45137,93.1851 -167.54973,96.474 -30.52176,16.4607 -66.9817,0.9998 -76.85392,-32.5899 -3.63904,-12.3816 -1.28522,-28.6672 5.92033,-40.9616 5.90989,-10.0837 12.67434,-15.1912 44.05794,-33.2655 40.38171,-23.2565 135.12713,-77.9292 157.92538,-91.1305 10.45,-6.0511 51.4,-29.652 91,-52.4464 39.6,-22.7944 72.64239,-42.0623 73.42754,-42.8177 1.23672,-1.1897 1.23672,-1.4415 0,-1.8832 -1.46391,-0.5229 -60.98307,-16.4989 -114.42754,-30.7144 -16.5,-4.3888 -32.25,-8.6019 -35,-9.3625 -2.75,-0.7607 -18.725,-5.0395 -35.5,-9.5085 -16.775,-4.469 -32.75,-8.7586 -35.5,-9.5324 -2.75,-0.7737 -8.59204,-2.3519 -12.98231,-3.5069 -19.53039,-5.1383 -32.49612,-15.6969 -39.03429,-31.7875 -5.96228,-14.6732 -5.45636,-29.5446 1.48764,-43.7283 9.14204,-18.6733 26.51259,-29.4334 47.48906,-29.4167 7.66671,0.01 11.74836,0.8512 36.0399,7.4626 26.97444,7.3416 56.7494,15.3011 73,19.5145 3.85,0.9982 61.04076,16.3051 127.09058,34.0153 l 120.09058,32.2005 48.40942,-27.9416 c 26.62518,-15.3678 71.80942,-41.4535 100.40938,-57.9682 28.6,-16.5147 70.9,-40.9387 94,-54.2755 23.1,-13.3369 43.8,-25.3061 46,-26.5983 2.2,-1.2921 9.0573,-5.1768 15.2385,-8.6325 6.1812,-3.4558 11.1012,-6.7332 10.9332,-7.2832 -0.2423,-0.7936 -88.4902,-52.1729 -162.1717,-94.4189 -6.6,-3.7842 -18.75,-10.805 -26.99996,-15.6019 -84.63772,-49.2115 -126.07912,-72.5947 -127.92866,-72.1834 -1.13924,0.2534 -7.24634,1.8647 -13.57134,3.5808 -21.70098,5.8877 -49.50308,13.365 -54.5,14.6576 -4.8332,1.2502 -45.82123,12.1868 -56,14.9422 -14.58548,3.9482 -47.27461,12.7193 -56,15.0258 -5.5,1.4538 -12.25,3.2482 -15,3.9875 -2.75,0.7393 -37.175,9.9967 -76.5,20.5719 -78.74433,21.1757 -81.6375,21.7363 -95.46898,18.4975 -25.83273,-6.0491 -43.66207,-32.3718 -39.61112,-58.4808 2.1682,-13.9744 8.94878,-25.9757 19.29763,-34.156 8.3704,-6.6164 12.2586,-8.1709 35.78247,-14.3057 5.225,-1.3626 50,-13.3523 99.5,-26.6438 49.5,-13.2914 92.475,-24.7995 95.5,-25.5734 18.00164,-4.6058 26.49873,-7.1647 26.48936,-7.9772 -0.0104,-0.8994 -22.06437,-13.7327 -209.98936,-122.19329 C 423.5309,835.91468 419.24546,833.44373 402.5873,823.89883 c -14.77525,-8.46602 -23.17119,-15.64615 -28.07058,-24.00569 -16.67859,-28.45768 -4.70716,-64.20378 25.63038,-76.53102 11.07226,-4.49907 26.76217,-4.78815 37.77117,-0.69592 3.97616,1.478 22.4937,11.90552 68.08177,38.33791 6.325,3.6673 52.45,30.30261 102.5,59.18958 50.05,28.88697 112.55058,64.9727 138.89019,80.19052 26.3396,15.21781 48.09434,27.46459 48.34386,27.21507 0.24953,-0.24952 -10.01247,-39.52394 -22.80443,-87.27648 -31.49507,-117.57141 -32.29186,-120.55723 -37.92933,-142.13204 -5.86484,-22.44494 -5.42815,-33.67012 1.85531,-47.69076 13.47527,-25.93986 45.49222,-35.90082 71.55133,-22.2607 8.24426,4.31529 18.50133,14.77329 22.4303,22.8697 2.53835,5.23077 9.0808,27.95094 17.67801,61.391 0.70701,2.75 3.77663,14.225 6.82139,25.5 3.04476,11.275 6.42754,23.875 7.5173,28 1.08976,4.125 12.85077,48 26.13558,97.5 13.28481,49.5 24.99659,93.15 26.02617,97 4.82266,18.03374 8.13523,30.5231 9.59918,36.19181 0.87948,3.40549 2.33842,6.82839 3.2421,7.60649 0.90367,0.7781 36.06804,21.242 78.143,45.4754 42.075,24.2335 83.25,47.98 91.5,52.7702 40.2259,23.3561 144.6996,83.4561 145.0744,83.4561 0.2341,0 0.4256,-82.2264 0.4256,-182.7254 V 820.54913 L 1115.5025,693.02457 c -70.1236,-70.13851 -128.69888,-129.2991 -130.16738,-131.46796 -4.23596,-6.25619 -7.60011,-17.09096 -8.09045,-26.05661 -0.84009,-15.36051 4.42734,-29.17166 15.25552,-39.99985 10.25881,-10.2588 23.00011,-15.52259 37.45991,-15.4757 9.7051,0.0315 14.8005,1.23748 24.0399,5.68991 7.2611,3.4991 10.383,6.4919 98,93.94674 49.775,49.68288 90.6062,90.33395 90.736,90.33571 0.1299,0.002 0.3549,-93.03431 0.5,-206.74681 l 0.264,-206.75 2.4694,-7 c 11.5098,-32.62665 50.1118,-46.05711 79.0342,-27.49767 6.5937,4.23113 14.8686,13.33873 18.2147,20.04754 6.1569,12.34414 5.7817,-2.10412 5.7817,222.66023 0,112.90944 0.3318,205.2899 0.7373,205.2899 0.4056,0 41.6931,-40.89279 91.75,-90.87287 84.8073,-84.67698 91.4559,-91.07732 97.5127,-93.87141 21.4426,-9.89171 44.3231,-6.05451 60.609,10.1645 11.0307,10.98543 15.6291,22.05665 15.6291,37.62874 0,9.46108 -1.4965,15.34782 -6.4701,25.45104 -2.5989,5.27919 -18.38,21.4385 -131.3609,134.50904 L 1349,821.51809 V 1003.759 c 0,100.2326 0.3447,182.241 0.766,182.241 0.4213,0 5.4838,-2.7475 11.25,-6.1056 16.2731,-9.4769 29.0324,-16.8492 126.484,-73.082 50.05,-28.8806 100.675,-58.1199 112.5,-64.9764 11.825,-6.8564 31.175,-18.0163 43,-24.7998 11.825,-6.7834 21.8188,-12.6079 22.2086,-12.9434 0.5645,-0.486 16.1326,-57.89223 43.8224,-161.5928 1.028,-3.85 4.4083,-16.45 7.5118,-28 3.1034,-11.55 6.2272,-23.25 6.9417,-26 0.7145,-2.75 4.9871,-18.725 9.4948,-35.5 4.5077,-16.775 8.7772,-32.75 9.4878,-35.5 0.7106,-2.75 3.5564,-13.325 6.324,-23.5 2.7675,-10.175 6.2078,-22.92717 7.645,-28.33815 1.4373,-5.41099 3.5534,-11.71099 4.7026,-14 11.0669,-22.04392 35.8232,-33.7681 59.5091,-28.18252 10.3783,2.44741 17.2245,6.29449 25.1016,14.10531 7.9071,7.84055 11.9317,15.00195 14.8336,26.39537 2.574,10.106 1.5325,17.10449 -7.593,51.01999 -4.5135,16.775 -8.7879,32.75 -9.4986,35.5 -0.7106,2.75 -3.7833,14.225 -6.828,25.5 -3.0448,11.275 -6.4893,24.1 -7.6545,28.5 -2.9229,11.03744 -5.0461,18.96752 -19.9349,74.45285 -7.1509,26.64906 -12.834,48.62045 -12.6292,48.82531 0.2962,0.29616 78.2008,-44.42439 182.5552,-104.79445 15.0177,-8.68787 140.3483,-80.9728 158.6861,-91.52281 16.4924,-9.48835 23.1709,-11.68966 35.3482,-11.65112 39.016,0.12349 64.019,40.5761 46.9173,75.90807 -7.2949,15.07135 -7.0248,14.87973 -81.4418,57.78215 -36.2524,20.9 -70.6601,40.74341 -76.4616,44.09646 -5.8015,3.35306 -45.6482,26.34607 -88.5482,51.09559 -70.9755,40.94658 -97.448,56.26025 -116.8009,67.56635 -3.7405,2.1853 -6.5267,4.2473 -6.1916,4.5824 0.3351,0.3351 12.1705,3.6866 26.3009,7.4477 14.1304,3.7611 39.1916,10.4488 55.6916,14.8616 16.5,4.4128 32.25,8.6038 35,9.3133 2.75,0.7095 16.025,4.2529 29.5,7.8743 13.475,3.6215 28.1,7.5417 32.5,8.7118 4.4,1.17 10.925,2.9501 14.5,3.9558 3.575,1.0057 16.175,4.4042 28,7.5523 24.4526,6.5099 30.337,9.0825 38.8929,17.0037 31.0647,28.7605 18.0068,79.5354 -23.1682,90.0884 -10.8943,2.7922 -20.4978,1.5283 -50.7247,-6.6759 -14.575,-3.956 -28.75,-7.7754 -31.5,-8.4878 -2.75,-0.7123 -18.725,-4.9867 -35.5,-9.4985 -16.775,-4.5119 -32.75,-8.7911 -35.5,-9.5092 -2.75,-0.7182 -15.35,-4.076 -28,-7.4617 -12.65,-3.3858 -26.15,-6.9898 -30,-8.0091 -3.85,-1.0192 -18.025,-4.8328 -31.5,-8.4748 -13.475,-3.6419 -29.45,-7.9218 -35.5,-9.5108 -6.05,-1.589 -28.6871,-7.644 -50.3046,-13.4555 -21.6175,-5.8115 -39.6514,-10.5664 -40.0752,-10.5664 -0.7292,0 -20.5582,11.3646 -94.6202,54.2294 -17.6,10.1864 -58.325,33.7082 -90.5,52.2707 -32.175,18.5625 -65.25,37.6467 -73.5,42.4092 -8.25,4.7625 -24.3319,14.0437 -35.7376,20.6249 -11.4056,6.5812 -20.7431,12.4243 -20.75,12.9847 -0.01,0.5603 15.1751,9.7597 33.7376,20.4431 18.5625,10.6833 40.5,23.3306 48.75,28.1051 8.25,4.7745 62.925,36.3361 121.5,70.1369 58.575,33.8008 107.4499,62.0517 108.611,62.7797 2.1998,1.3795 2.3979,1.3494 15.889,-2.4097 2.75,-0.7663 16.25,-4.3936 30,-8.0607 13.75,-3.6672 28.15,-7.5161 32,-8.5532 6.9582,-1.8743 53.6219,-14.3697 67,-17.9409 3.85,-1.0277 47.5,-12.7338 97,-26.0134 49.5,-13.2797 94.1681,-25.2386 99.2625,-26.5754 22.6737,-5.9495 42.8452,-0.6708 56.8162,14.8683 15.4603,17.1957 17.8368,42.9294 5.8048,62.8583 -4.0548,6.7161 -13.0441,15.2917 -19.9389,19.0211 -2.7231,1.473 -8.3246,3.6307 -12.4479,4.7949 -7.9738,2.2515 -177.5557,47.805 -199.4967,53.5893 -31.8734,8.4028 -37.9806,10.1915 -37.6842,11.037 0.3161,0.9019 29.9488,18.2059 128.1842,74.8535 28.875,16.6509 70.275,40.5344 92,53.0747 21.725,12.5402 44.675,25.7843 51,29.4314 94.203,54.3187 90.3881,51.697 97.9464,67.3124 14.0614,29.0509 -0.6362,64.004 -30.9464,73.5953 -10.5011,3.323 -25.0937,3.0029 -34.9485,-0.7665 -3.9898,-1.5261 -49.1014,-27.2397 -118.0515,-67.2894 -17.3733,-10.0912 -126.3026,-72.9658 -202.5,-116.884 -8.25,-4.7551 -19.8618,-11.4596 -25.8039,-14.8989 -5.9422,-3.4393 -10.9884,-6.0689 -11.2138,-5.8434 -0.2255,0.2254 5.4467,22.2137 12.6048,48.8628 7.1581,26.649 13.8596,51.6028 14.8923,55.4528 1.0326,3.85 3.953,14.875 6.4897,24.5 2.5367,9.625 6.2253,23.35 8.1969,30.5 1.9716,7.15 4.1639,15.25 4.8718,18 0.7079,2.75 4.9707,18.725 9.4729,35.5 4.8579,18.1003 8.3966,33.354 8.7043,37.52 1.409,19.0768 -10.9609,40.5178 -28.477,49.3599 -17.0657,8.6147 -38.6195,7.6004 -53.524,-2.5189 -6.8485,-4.6497 -14.511,-13.2033 -17.7845,-19.8527 -2.9697,-6.0323 -7.5112,-22.205 -31.4534,-112.0083 -3.6659,-13.75 -7.0302,-26.35 -7.4763,-28 -0.4461,-1.65 -4.4262,-16.5 -8.8447,-33 -4.4185,-16.5 -12.0767,-45.075 -17.0181,-63.5 -4.9414,-18.425 -13.985,-52.1688 -20.0969,-74.9863 -6.1119,-22.8174 -11.4338,-41.7539 -11.8264,-42.0812 -0.3925,-0.3272 -7.2387,-4.3493 -15.2137,-8.938 -7.975,-4.5887 -19.9,-11.4782 -26.5,-15.31 -6.6,-3.8318 -48.675,-28.1055 -93.5,-53.9415 -44.825,-25.8361 -91.4,-52.723 -103.5,-59.7487 -12.1,-7.0257 -23.575,-13.6723 -25.5,-14.7702 -1.925,-1.0978 -13.7281,-7.9079 -26.2291,-15.1335 -12.501,-7.2255 -23.4135,-13.4 -24.25,-13.721 -1.3578,-0.521 -1.5209,18.975 -1.5209,181.7644 v 182.3479 l 128.3574,128.5091 c 89.5975,89.7034 129.1282,129.9328 130.9101,133.2242 7.2904,13.4659 9.0755,29.32 4.8254,42.8569 -8.2534,26.2881 -36.9429,42.3273 -63.3897,35.4388 -14.7306,-3.8368 -10.7092,-0.2078 -108.7106,-98.1023 -49.7791,-49.7247 -90.8416,-90.4086 -91.25,-90.4086 -0.4084,0 -0.7426,92.3805 -0.7426,205.2899 0,178.5853 -0.1937,206.0336 -1.4891,211.0069 -6.811,26.1491 -31.3398,42.8977 -58.0109,39.6106 z"
       id="path179" />
  </g>
</svg>

One thing I am not sure about...
When using the svg image in an epub, how do you figure out the correct size. This image is very large, so how do I figure out sizing so it is the equivelant of 1em in the epub and matches the rest of the text sizing, and also how do you ensure it resizes if a user increases font size in their ereader?

.

In this particular case of you, insert the svg as any other image (with the img tag) and give it a style like the following:

.txtimg {
   display: inline;
   height: 1em;  /* or the size of the sorrounding text */
}

You will have something like:

<p>Your text here <img class="txtimg" alt="" src="the path to your svg img"> more text</p>