How would I be able to convert this type of svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" viewBox="0 0 250 250">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c145 79.163499, 2018/08/13-16:40:22 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/"
xmlns:xmp="http://ns.adobe.com/xap/1.0/"
xmlns:xmpRights="http://ns.adobe.com/xap/1.0/rights/">
<xmpRights:Marked>True</xmpRights:Marked>
</rdf:Description>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image id="N_side_slit" data-name="N side slit" x="21" y="44" width="178" height="148" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAALIAAACUCAYAAAA3f3NDAAADx0lEQVR4nO3a3Y3rNhCA0dm9eUtTaSA9pIX0ky5SQFJCmslj4GCBXcAw1j+SSHGGPN+zJdP0sSCTertcLpeo2VvRcc/eEE/vhUFU/QGqQ++fp4RZpXu/GjzMKtv7zcBhVsluIQfMqth3kANmVese5IBZlXoEOWBWlZ5BDphVoVcgB8zK3quQA2ZlbgvkgFlZ2wo5YFbG9kAOmJWtvZDjE/M/BXHAPGFHIH/0e0T8C7NGdxTy3xHxK8wa3VHIAbMy1AJywKzRtYIcMGtkLSEHzBpVa8gBs0bUA3LArLPrBTlg1pn1hBww66x6Qw6YdUZnQA6Y1buzIAfM6tmZkANm9epsyAGzejQCcsCs1o2CHDCrZSMhB8xq1WjIAbNalAFywKyjZYEcMOtImSAHzNpbNsgBs/aUEXLArK1lhRwwa0uZIQfMerXskANmvVIFyAGznjUS8m8bXw+z7jYS8h8wq1UjIf+AWa0afY8Ms5qU4c8ezDpcllULmHWoTMtvMGt32daRYdauMm6IwKzNZd3Zg1mbyrxFDbNeLvuzFjDrpSo8NASznlbl6TeY9bAqkANmPaoS5IBZ96oGOWDWd1WEHDDrtqqQA2ZdVxlywKyvqkMOmBWTQA6YNQvkgHntZoIcMK/bbJAD5jWbEXLAvF6zQg6Y12pmyAHzOs0OOWBeoxUgB8zz93a5DPu8I974v4j4acdxv0TEnxHx88ecdRhXz84e7xBQq1yRv/qx8zhX5uStBvlIMCcO5G3BnDSQtwdzwkDeF8zJAnl/MCcK5GNdY67WVJhXW0eOTuuqH+vMf3U47xm1no8h3yvIbat6lWs5JzZEJqjart9X5W8zQG4fzAMCuU8wnxzI/YL5xEDuG8wnBXL/YD4hkM8J5s6BfF4wdwzkc4O5UyCfH8wdAnlMMDcO5HHB3DCQxwZzo0AeH8wNAjlHMB8M5DzBfCCQcwXzzkDOF8w7AjlnMG8M5LxVxTwkkHMH84uBnD+YXwjkGsH8JJDrBPODQK4VzHcCuV4wfxPINYP5JpDrBvNVINcO5s9Art/ymAPkaVoeM8jztDRmkOdqWcwgz9eSmEGes+UwgzxvS2EGee6WwQzy/C2BGeQ1mh4zyOs0NWaQ12pazCCv15SYQV6z6TCDvG5TYQZ57abBDLKmwAyyYgbMIOur0phB1nVlMYOs20piBlnfVQ4zyLpXKcwg61FlMIOsZ5XADLJeKT1mkPVqqTGDrC2lxQyytpYSM8jaUzrMIGtvqTCDrCOlwQyyjpYCM8hq0XDMIKtV4zBHxP/bUFzI1KMfEAAAAABJRU5ErkJggg=="/>
</svg>
To a type of svg that has a path and is usable in html like this:
<svg width="36px" height="24px" viewBox="0 0 36 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M8.98885921,23.8523026 C8.8942483,23.9435442 8.76801031,24 8.62933774,24 L2.03198365,24 C1.73814918,24 1.5,23.7482301 1.5,23.4380086 C1.5,23.2831829 1.55946972,23.1428989 1.65570253,23.0416777 L13.2166154,12.4291351 C13.3325814,12.3262031 13.4061076,12.1719477 13.4061076,11.999444 C13.4061076,11.8363496 13.3401502,11.6897927 13.2352673,11.587431 L1.68841087,0.990000249 C1.57298556,0.88706828 1.5,0.733668282 1.5,0.561734827 C1.5,0.251798399 1.73814918,2.85130108e-05 2.03198365,2.85130108e-05 L8.62933774,2.85130108e-05 C8.76855094,2.85130108e-05 8.89532956,0.0561991444 8.98994048,0.148296169 L21.4358709,11.5757407 C21.548593,11.6783875 21.6196864,11.8297916 21.6196864,11.999444 C21.6196864,12.1693815 21.5483227,12.3219261 21.4350599,12.4251432 L8.98885921,23.8523026 Z M26.5774333,23.8384453 L20.1765996,17.9616286 C20.060093,17.8578413 19.9865669,17.703871 19.9865669,17.5310822 C19.9865669,17.3859509 20.0390083,17.2536506 20.1246988,17.153855 L23.4190508,14.1291948 C23.5163648,14.0165684 23.6569296,13.945571 23.8131728,13.945571 C23.9602252,13.945571 24.0929508,14.0082997 24.1894539,14.1092357 L33.861933,22.9913237 C33.9892522,23.0939706 34.0714286,23.2559245 34.0714286,23.4381226 C34.0714286,23.748059 33.8332794,23.9998289 33.5394449,23.9998289 L26.9504707,23.9998289 C26.8053105,23.9998289 26.6733958,23.9382408 26.5774333,23.8384453 Z M26.5774333,0.161098511 C26.6733958,0.0615881034 26.8053105,0 26.9504707,0 L33.5394449,0 C33.8332794,0 34.0714286,0.251769886 34.0714286,0.561706314 C34.0714286,0.743904453 33.9892522,0.905573224 33.861933,1.00822006 L24.1894539,9.89030807 C24.0929508,9.99152926 23.9602252,10.0542579 23.8131728,10.0542579 C23.6569296,10.0542579 23.5163648,9.98354562 23.4190508,9.87063409 L20.1246988,6.8459739 C20.0390083,6.74617837 19.9865669,6.613878 19.9865669,6.46874677 C19.9865669,6.29624305 20.060093,6.14198767 20.1765996,6.03848544 L26.5774333,0.161098511 Z" fill="#FFFFFF"></path>
</svg>
(These are 2 different images)
You'll need to load the first one into a vector editor (eg Inkscape) and use the editor's drawing tools to manually recreate the shape(s).
After 2-3 hours of messing with every possible online program. I downloaded Inkscape and tried to make a svg.
It took another 2 hours because it was showing 0 path every time I was trying to make a svg. Then I found out it didn't detect the shape because it was white.
So I had to go back to photoshop, change the colour to black, save as a PNG then open it on Inkscape then re-path it. Took me way to long to figure this out.
You will need a thirdparty program to make svgs, there is no escaping them. I tried.
Thank you Paul for the suggestion.
I have an .svg file with two glyphs. When I draw them separately using their respective d attributes, they appear one on top of the other.
I am not able to determine how to use the rest of the information contained in the .svg file to print them in their correct relative positions.
Details (some most likely irrelevant).
Compile $-1$ in LATEX (with standalone package)
Convert the .dvi file to an .svg file using dvisvgm (see below).
Draw the two 'glyphs' using their "d" attributes (after suitable conversion to the appropriate format for aggdraw.Symbol). (Another surprise: the glyphs appear flipped upside down...)
<!-- This file was generated by dvisvgm 1.9.2 -->
<svg height='7.61312pt' version='1.1' viewBox='-72 -71.9747 13.3666 7.61312' width='13.3666pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<font horiz-adv-x='0' id='cmsy10'>
<font-face ascent='775' descent='-960' font-family='cmsy10' units-per-em='1000'/>
<glyph d='M659 230C676 230 694 230 694 250S676 270 659 270H118C101 270 83 270 83 250S101 230 118 230H659Z' glyph-name='minus' horiz-adv-x='777' unicode='㐀' vert-adv-y='777'/>
</font>
<font horiz-adv-x='0' id='cmr10'>
<font-face ascent='750' descent='-250' font-family='cmr10' units-per-em='1000'/>
<glyph d='M294 640C294 664 294 666 271 666C209 602 121 602 89 602V571C109 571 168 571 220 597V79C220 43 217 31 127 31H95V0C130 3 217 3 257 3S384 3 419 0V31H387C297 31 294 42 294 79V640Z' glyph-name='one' horiz-adv-x='500' unicode='1' vert-adv-y='500'/>
</font>
</defs>
<style type='text/css'><![CDATA[
text.f0 {font-family:cmsy10;font-size:10.5px}
text.f1 {font-family:cmr10;font-size:10.5px}
]]>
</style>
<g id='page1'>
<text class='f0' x='-72' y='-65.2334'>㐀</text>
<text class='f1' x='-63.8638' y='-65.2334'>1</text>
</g>
</svg>
I have an SVG image which I am trying to display in an HTML page. When this is displayed in Safari, the text overlaps with each other as seen below:
When I display this svg in Chrome, the text appears better. You can see the 'One Center' text is not overlapped.
The SVG code for these 4 lines is as below:
Here is the markup:
<svg:g xmlns:svg="http://www.w3.org/2000/svg" transform="">
<svg:text transform=" scale(1, -1)" xml:space="preserve">
<svg:tspan font-family="Helvetica" font-size="8px" y="-712.4" x="22.7 24.924 30.724 35.628 42.732 47.18 51.628 56.076 58.724 60.948 66.748 71.196 76.1 78.3 82.748 84.972 90.772 95.676 102.78 109.884 114.788 119.692 121.892 126.34 130.788 133.436 135.636 140.54 145.444 149.892" font-weight="bold" fill="rgb(0,0,0)">
ABC DEF JHK
</svg:tspan>
</svg:text>
<svg:g xmlns:svg="http://www.w3.org/2000/svg" transform="">
<svg:text transform=" scale(1, -1)" xml:space="preserve">
<svg:tspan font-family="Helvetica" font-size="8px" y="-712.4" x="152 158.648 163.096 168 172.448 177.352 181.8 188.904 193.352 198.256 200.904 203.128 208.032 212.936" font-weight="bold" fill="rgb(0,0,0)">
Management LLC
</svg:tspan>
</svg:text>
<svg:g xmlns:svg="http://www.w3.org/2000/svg" transform="">
<svg:text transform=" scale(1, -1)" xml:space="preserve">
<svg:tspan font-family="Helvetica" font-size="8px" y="-703.4" x="22.7 24.924 31.124 36.028 40.476 42.7 48.5 53.404 60.508 64.956 69.404 73.852 76.5 78.724 84.524 88.972 93.876 96.524 100.972" font-weight="bold" fill="rgb(0,0,0)">
One Center
</svg:tspan>
</svg:text>
Any ideas on why Safari would render it badly compared to Chrome and if anything can be done to correct this?
I have this code for inline svg icon:
#Icon = React.createClass
render: ->
<svg width="22" height="22" viewBox="0 0 22 22">
<defs>
<path d="M16.865 6.887c.136.449 2.028.624 2.086 1.209a8.862 8.862 0 0 1-.002 1.754c-.059.585-1.951.741-2.089 1.19-.138.45-.318.882-.542 1.296-.223.415 1 1.861.625 2.315a8.954 8.954 0 0 1-1.251 1.242c-.457.373-1.916-.839-2.333-.617a7.272 7.272 0 0 1-1.305.538c-.453.137-.607 2.014-1.196 2.072a9.062 9.062 0 0 1-1.766.002c-.589-.057-.767-1.934-1.22-2.07a7.221 7.221 0 0 1-1.304-.535c-.417-.221-1.85.994-2.307.621a8.911 8.911 0 0 1-1.248-1.239c-.374-.453.824-1.902.601-2.316a7.077 7.077 0 0 1-.538-1.295c-.137-.449-2.002-.602-2.06-1.186a8.939 8.939 0 0 1 .002-1.754c.059-.585 1.924-.763 2.062-1.213.137-.449.318-.881.541-1.296.224-.414-.972-1.838-.596-2.293a9.057 9.057 0 0 1 1.25-1.242c.458-.373 1.889.817 2.306.595a7.346 7.346 0 0 1 1.305-.538C8.339 1.991 8.521.136 9.11.078a9.061 9.061 0 0 1 1.766-.002c.588.057.739 1.911 1.192 2.047.452.136.887.315 1.304.536.416.221 1.877-.972 2.334-.6.457.372.873.785 1.248 1.239.375.454-.851 1.88-.629 2.294.223.414.403.846.54 1.295zm-6.852-2.376A4.498 4.498 0 0 0 5.514 9a4.486 4.486 0 0 0 4.494 4.484 4.498 4.498 0 0 0 4.499-4.489 4.486 4.486 0 0 0-4.494-4.484z" id="a"/>
<mask id="b" x="-2" y="-2" width="22.02" height="21.896">
<path fill="#fff" d="M-1.026-1.966h22.02V19.93h-22.02z"/>
<use xlinkHref="#a"/>
</mask>
</defs>
<use mask="url(#b)" xlinkHref="#a" transform="translate(1 2)" strokeWidth="4" stroke="#0070D9" fill="none" fillRule="evenodd"/>
</svg>
But react skip this property: mask="url(#b)"
demo: https://jsfiddle.net/88kLutmb/
It seems to work fine: https://jsfiddle.net/07xre6dx/
I assume that you are using some old react version, since use tag with map attribute wasn't supported until 15.0 version:
Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we added support for all the SVG attributes that are recognized by today’s browsers. If we missed any of the attributes you’d like to use, please let us know. As a bonus, thanks to using document.createElement, we no longer need to maintain a list of SVG tags, so any SVG tags that were previously unsupported should work just fine in React 15.
As a workaround for now you can use dangerouslySetInnerHTML
function createMarkup() { return {__html: 'svg code here '}; };
<div dangerouslySetInnerHTML={createMarkup()} />
I try to use below steps to get a SVG file but it seems the output SVG file not displayed correctly.
Use latex to compile latex code test.tex to dvi file.
\documentclass{standalone}
\usepackage{tikz}
\begin{document}
\begin{tikzpicture}
\def\r{2cm}
\node (O) at (0,0) {$O$};
\draw (0,0) circle (\r);
\draw[->] (-\r,0)--(\r,0);
\draw[->] (0,-\r)--(0,\r);
\end{tikzpicture}
\end{document}
Compile to dvi (test.dvi) with below command line:
# latex test.tex
use dvisvgm tool to convert dvi file to SVG (test.svg).
# dvisvgm --no-fonts test.dvi
The SVG file seems created successfully but it only display a O character in Chrome Browser or Firefox.
So I guess the SVG file maybe something wrong.
The SVG file content as below:
<?xml version='1.0' encoding='ISO-8859-1'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- This file was generated by dvisvgm 1.2.2 (x86_64-apple-darwin10.8.0) -->
<!-- Sat Nov 30 21:38:15 2013 -->
<svg height='6.8078pt' version='1.1' viewBox='-15.1079 -21.9156 7.87601 6.8078' width='7.87601pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M7.4 -4.36C7.4 -5.97 6.34 -7.05 4.85 -7.05C2.69 -7.05 0.49 -4.78 0.49 -2.45C0.49 -0.79 1.61 0.22 3.05 0.22C5.17 0.22 7.4 -1.97 7.4 -4.36ZM3.11 -0.04C2.12 -0.04 1.42 -0.85 1.42 -2.17C1.42 -2.61 1.56 -4.07 2.33 -5.24C3.02 -6.28 4 -6.8 4.79 -6.8C5.61 -6.8 6.51 -6.24 6.51 -4.75C6.51 -4.03 6.24 -2.47 5.25 -1.24C4.77 -0.63 3.95 -0.04 3.11 -0.04Z' id='g0-79'/>
</defs>
<g id='page1' transform='matrix(0.996264 0 0 0.996264 0 0)'>
<use x='-15.1645' xlink:href='#g0-79' y='-15.1645'/>
</g>
</svg>
Anything wrong with dvisvgm command?
You probably ran dvisvgm with deactivated PostScript support. You can find further information on how to check this on the dvisvgm FAQ page. With activated PS support, I get the correct result:
<?xml version='1.0'?>
<!-- This file was generated by dvisvgm 1.5.1 (x86_64-pc-win64) -->
<!-- Sun Dec 01 20:59:37 2013 -->
<svg height='113.785pt' version='1.1' viewBox='-72 -72 113.785 113.785' width='113.785pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M7.4 -4.36C7.4 -5.97 6.34 -7.05 4.85 -7.05C2.69 -7.05 0.49 -4.78 0.49 -2.45C0.49 -0.79 1.61 0.22 3.05 0.22C5.17 0.22 7.4 -1.97 7.4 -4.36ZM3.11 -0.04C2.12 -0.04 1.42 -0.85 1.42 -2.17C1.42 -2.61 1.56 -4.07 2.33 -5.24C3.02 -6.28 4 -6.8 4.79 -6.8C5.61 -6.8 6.51 -6.24 6.51 -4.75C6.51 -4.03 6.24 -2.47 5.25 -1.24C4.77 -0.63 3.95 -0.04 3.11 -0.04Z' id='g0-79'/>
</defs>
<g id='page1' transform='matrix(0.996264 0 0 0.996264 0 0)'>
<g transform='matrix(1 0 0 1 -3.938 3.4039)'>
<use x='-15.1645' xlink:href='#g0-79' y='-15.1645'/>
</g>
<path d='M41.7418 -15.166C41.7418 -46.5921 16.2639 -72.0701 -15.166 -72.0701C-46.5921 -72.0701 -72.0701 -46.5921 -72.0701 -15.166C-72.0701 16.2639 -46.5921 41.7418 -15.166 41.7418C16.2639 41.7418 41.7418 16.2639 41.7418 -15.166ZM-15.166 -15.166' fill='none' stroke='#000000' stroke-miterlimit='10.0375' stroke-width='0.399994'/>
<path d='M-72.0701 -15.166H41.2831' fill='none' stroke='#000000' stroke-miterlimit='10.0375' stroke-width='0.399994'/>
<path d='M40.0834 -16.7658C40.1814 -16.1659 41.2832 -15.2641 41.5812 -15.166C41.2832 -15.0641 40.1814 -14.1662 40.0834 -13.5663' fill='none' stroke='#000000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.319985'/>
<path d='M-15.166 41.7418V-71.6113' fill='none' stroke='#000000' stroke-miterlimit='10.0375' stroke-width='0.399994'/>
<path d='M-16.7658 -70.4115C-16.1659 -70.5096 -15.2641 -71.6113 -15.166 -71.9093C-15.0641 -71.6113 -14.1662 -70.5096 -13.5663 -70.4115' fill='none' stroke='#000000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10.0375' stroke-width='0.319985'/>
</g>
</svg>
The SVG looks fine. It has only one graphical element in it (the path) and it gets drawn correctly by the browser(s).
So that would suggest that there is something wrong with your latex file or the conversion tool. I don't know latex well enough, so I can't help with that.
Oh,that means I didn't install Ghostscript tool in my MAC.
I try to install ghostscript to MAC with below command:
# sudo port install ghostscript
The install seems work fine but it seems only /usr/local/gs file created, no share library at all.
Then I try to check dvisvgm libgs settings:
# dvisvgm -h |grep libgs
--libgs=filename set name of Ghostscript shared library
# dvisvgm -l |grep gs
Notes:Nothing output for this command.
That means I need to use a --libgs=filename option to specify the share library.
Does that means dvisvgm tool can not work in MAC?
I have tried to compile ghostscript from source on MAC but compile failure.
Then I try to use MAC version gs to convert pdf to SVG, it seems segment fault:
# gs -dBATCH -dSAFER -dNOPAUSE -sDEVICE=svg -sOutputFile=test.Svg test.pdf
....
Segmentation fault: 11
And inkscape seems works fine with below command:
inkscape test.pdf --export-plain-svg=test.svg
inkscape really do good job on MAC bit a bit time consuming.