Menu
I am looking for a javascript tool/lib which can convert formatted html text (font tags, margins etc) into svg. I am using bootstrap-wysiwyg to enable rich text input but need to get the result converted into native svg. The initial html is something like:
<div id="editor" contenteditable="true">Go <font face="Sans">ahead</font>… and
<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
<div><font size="15" face="Impact">by the </font></div>
</blockquote>
</blockquote>
<div>
<div style="text-align: center;"><font size="15" face="Courier New" style="color: inherit;">way</font><span
style="color: inherit;"> </span></div>
</div>
<div>
<div style="text-align: left;"><span style="color: inherit;">all is now</span></div>
</div>
which can get pretty complex after playing around with the editor features a bit. Alternative i would be very happy to find a similar javascript WIWhSWYG rich text editor which creates native svg straight away yet i haven't found anything so far.
Any pointer highly appreciated.
UPDATE: While still looking for a complete solution I am experimenting right now with http://quilljs.com/ which seems very promising as it at least does half of the job for you. It has a very handy API through which you can get the representation of the current text with all its format information as an array of Text/Format Objects (called Deltas in its own terminology) . These Deltas are a very good starting point to create the desired SVG texts, particular if you, as in my case, only need a small subset of the common rich editor features.
274
You can convert your HTML documents from any platform (Windows, Linux, macOS). No registration needed. Just drag and drop your HTML file on upload form, choose the desired output format and click convert button. Once conversion completed you can download your SVG file.
The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text> , like any other SVG graphics element. If text is included in SVG not inside of a <text> element, it is not rendered.
The <text> element can be arranged in any number of sub-groups with the <tspan> element. Each <tspan> element can contain different formatting and position. Text on several lines (with the <tspan> element): Several lines: First line.
<svg> with <rect> and <text> elements inside it used to write text inside the rectangle of SVG. To do that, we need to join the<rect> and <text> elements. Refer the topics Draw Rectangle and Draw Text to get the clear understanding of SVG <rect> and <text> elements.
See
http://quotemirror.com/lab/quilljsGoesSVG/
for an unpolished proof of concept hack to convert quilljs.com editor input into svg. Only a few basic editor features are implemented. Key in this implementation is the usage of the abstract representation of the formatted editor input - deltas - which quilljs.com is offering through its marvelous API . This demo might be buggy yet is meant to show one way to implement this.
101
As above, another example. Content editable div. This is making an SVG of the whole area including the heading, but you can configure the JS to format any DIV you like.
http://www.cloudformatter.com/CSS2Pdf.Demos.TryIt
We have only wired to download now, select the download button and select SVG.
Most all the demos on this page work in the same way. We are only working through sizing characteristics of SVG inserted into other SVG (for the charting demos).
Web site on left, SVG result on right in image below.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
