SVG elements piled up when drawn separately - svg
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>
Related
How can I allow buttons in Android development to scale without changing their shape?
Say we got this button in a layout file, say app/res/layout/activity_main.xml: <Button android:id="#+id/button" android:layout_width="wrap_content" android:layout_height="50dp" android:background="#drawable/test" android:text="ok" /> Also say that #drawable/test is an SVG file (vector image) that gives a unique shape for the button as follows: The problem that I have is that when the text android:text="sadfsdafsadfsadfsadfsdfsdafsdf" is long, the button's shape gets ruined as follows: As the button is stretched horizontally, I want only to stretch the button from the middle, without harming its shape on the sides. This is the desired outcome (trying to achieve it, but so far it failed): I heard of 9-patch files, but sadly they only work for bitmaps. About vector files: how can we maintain their shapes when scaled?
AFAIK, there isn't any direct way to achieve this without using a 9-patch. Either you will need to make the head and tail portion for the button into a different views if and only if you need to use a vector. I suggest to make a PNG copy of this vector and use 9 patch of it. If you're concerned about the size, then it won't cost much for 9-patch images.
This can be achieved by trimming stroked path on your vector drawable. More information is in Trimming stroked paths. Example: <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector android:name="vector" android:width="500dp" android:height="500dp" android:viewportWidth="500" android:viewportHeight="500"> <path android:name="path" android:pathData="M 120 80 L 160 120 L 120 160 L 160 160 L 160 80 L 120 80" android:fillColor="#31a8f7" android:strokeColor="#31a8f7" android:strokeWidth="1"/> <path android:name="path_1" android:pathData="M 320 120 L 160 120" android:strokeColor="#31a8f7" android:strokeWidth="81"/> <path android:name="path_2" android:pathData="M 320 160 L 360 120 L 320 80 Z" android:fillColor="#31a8f7" android:strokeColor="#31a8f7" android:strokeWidth="1"/> </vector> </aapt:attr> <target android:name="path_1"> <aapt:attr name="android:animation"> <set> <objectAnimator android:propertyName="trimPathStart" android:duration="150" android:valueFrom="0.6" android:valueTo="0" android:valueType="floatType" android:interpolator="#android:interpolator/fast_out_slow_in"/> <objectAnimator android:propertyName="trimPathStart" android:startOffset="150" android:duration="150" android:valueFrom="0" android:valueTo="0.6" android:valueType="floatType" android:interpolator="#android:interpolator/fast_out_slow_in"/> </set> </aapt:attr> </target> <target android:name="path_2"> <aapt:attr name="android:animation"> <set> <objectAnimator android:propertyName="pathData" android:duration="150" android:valueFrom="M 220 160 L 260 120 L 220 80 Z" android:valueTo="M 320 160 L 360 120 L 320 80 Z" android:valueType="pathType" android:interpolator="#android:interpolator/fast_out_slow_in"/> <objectAnimator android:propertyName="pathData" android:startOffset="150" android:duration="150" android:valueFrom="M 320 160 L 360 120 L 320 80 Z" android:valueTo="M 220 160 L 260 120 L 220 80 Z" android:valueType="pathType" android:interpolator="#android:interpolator/fast_out_slow_in"/> </set> </aapt:attr> </target> </animated-vector>
How to only present output in Google Colaboratory?
I have the following svg that presents a logo but I want to generate a .pdf where it's only present the logo and not the code of this specific cell, how can I do that? The svg: %%html <svg width="529" height="265" xmlns="http://www.w3.org/2000/svg" xmlns:undefined="http://www.inkscape.org/namespaces/inkscape"> <g> <title>Layer 1</title> <metadata id="svg_14">image/svg+xml</metadata> <g> <metadata id="svg_9">image/svg+xml</metadata> <g transform="matrix(1.33333 0 0 -1.33333 0 468.32)" id="svg_2"> <g transform="translate(0 -76.2875) scale(0.1 0.1)" id="svg_3"> <!-- uminho symbol + red background --> <path fill-rule="nonzero" fill="#a42a3c" id="svg_7" d="m0,2291.02528l1984.25,0l0,1984.25l-1984.25,0l0,-1984.25"/> <!-- uminho symbol --> <path fill-rule="nonzero" fill="#ffffff" id="svg_6" d="m1502.43,3514.55528l-378.95,-220.62c-68.8,-39.71 -129.285,64.76 -60.48,104.49l379,220.52c68.88,39.76 129.16,-64.71 60.43,-104.39m-1039.617,-1.46l383.14,-217.25c68.711,-39.66 129.059,64.89 60.172,104.67l-383.203,217.16c-68.77,39.7 -128.938,-64.84 -60.109,-104.58m459.449,-797.92l-0.047,440.75c0,33.37 27.109,60.33 60.379,60.33c33.336,0 60.336,-27.01 60.336,-60.34l-0.05,-440.74c0,-33.28 -26.92,-60.34 -60.286,-60.33c-33.321,0 -60.332,27.01 -60.332,60.33m-379.258,235.44l184.039,104.36c68.863,39.77 8.461,144.3 -60.289,104.6l-183.996,-104.46c-68.774,-39.72 -8.574,-144.24 60.246,-104.5m918.046,-3.45l-179.19,108.08c-68.78,39.7 -8.28,144.18 60.55,104.43l179.14,-108.16c68.72,-39.67 8.4,-144.12 -60.5,-104.35m-478.495,964.28c-33.371,0 -60.293,-27.05 -60.293,-60.33l-0.047,-211.59c0,-33.32 27.012,-60.34 60.34,-60.34c33.265,0 60.375,26.98 60.375,60.34l-0.05,211.59c0,33.32 -27,60.33 -60.325,60.33"/> <!-- ec symbol + blue background --> <path fill-rule="nonzero" fill="#8cbce8" id="svg_5" d="m1984.25,2291.02528l1984.26,0l0,1984.25l-1984.26,0l0,-1984.25"/> <!-- ec symbol --> <path fill-rule="nonzero" fill="#ffffff" id="svg_4" d="m3540.85,3037.67528l-100.97,183.1c-39.72,68.79 -144.26,8.6 -104.58,-60.12l101.07,-183.06c39.74,-68.84 144.12,-8.57 104.48,60.08m-17.75,558.93c0,33.34 -27.02,60.24 -60.29,60.24l-211.41,0.05c-33.3,0 -60.28,-27 -60.28,-60.29c0,-33.25 26.94,-60.34 60.28,-60.34l211.41,0.05c33.31,0 60.29,26.99 60.29,60.29m-362.52,-738.96c16.65,28.85 6.78,65.71 -22.07,82.36c-28.87,16.67 -65.68,6.72 -82.31,-22.09l-105.75,-183.06c-16.65,-28.84 -6.77,-65.71 22.07,-82.36c28.79,-16.62 65.73,-6.83 82.4,22.04l105.66,183.11zm-150.24,974.55c16.66,28.85 6.77,65.71 -22.06,82.36c-28.88,16.67 -65.69,6.72 -82.32,-22.09l-105.75,-183.06c-16.65,-28.84 -6.76,-65.71 22.07,-82.36c28.8,-16.62 65.73,-6.83 82.4,22.05l105.66,183.1zm-241.49,-862.5c0,33.25 -26.96,60.34 -60.29,60.34l-211.42,-0.05c-33.29,0 -60.29,-27 -60.29,-60.29c-0.01,-33.35 27.04,-60.24 60.29,-60.24l211.4,-0.05c33.31,0 60.31,26.99 60.31,60.29m-146.85,428.75l-105.75,183.06c-16.63,28.81 -53.44,38.76 -82.31,22.09c-28.84,-16.65 -38.72,-53.51 -22.07,-82.36l105.66,-183.1c16.67,-28.88 53.61,-38.67 82.4,-22.05c28.83,16.65 38.72,53.52 22.07,82.36"/> </g> </g> </g> </g> </svg> The Output is this one: Thanks in advance. R.: One of the options I have is convert the svg to a png and put it there but I would like to not do that extra step.
By far the simplest way to convert SVG to PDF is via HTML, so I suggest you add enough HTML wrapping to control the output. Here we can see the normal HTML placement would include lots of other page data which of course you may add as you wish. One gotcha is of course units so you may need to introduce scaling factors but that is way beyond this simple demonstration of how to show and convert SVG-to-PDF
The first step is wrapping the SVG with the HTML (and this is overkill) but I simply used your Minimal !! SVG for cut and paste in a template as proof of concept.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=https://stackoverflow.com/questions/70731953 -->
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>None</title>
<meta name="GENERATOR" content="KJs Template Builder V 2022-01">
<meta http-equiv="Content-Style-Type" content="text/css"><style>
#media print {
#page {
/* For different margins – use the standard CSS margin property: north, east, south, west, here it is one value */
margin: 0;
/* Browser default, customisable by the user if using the print dialogue. */
size: auto;
/* Default, In my instance of Edge, this is a vertical or horizontal A4 format, but you might find something different depending on your locale. */
size: portrait;
/* Different width and height. here using stated width="529" height="265" can be px or pt or cm. For square, just use one value or use name like A6 landscape; note this is over-riding both above size: */
size: 529px 265px;
}
body { margin: 0; }
}
</style>
</head><body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<svg width="529" height="265" xmlns="http://www.w3.org/2000/svg" xmlns:undefined="http://www.inkscape.org/namespaces/inkscape">
<g>
<title>Layer 1</title>
<metadata id="svg_14">image/svg+xml</metadata>
<g>
<metadata id="svg_9">image/svg+xml</metadata>
<g transform="matrix(1.33333 0 0 -1.33333 0 468.32)" id="svg_2">
<g transform="translate(0 -76.2875) scale(0.1 0.1)" id="svg_3">
<!-- uminho symbol + red background -->
<path fill-rule="nonzero" fill="#a42a3c" id="svg_7" d="m0,2291.02528l1984.25,0l0,1984.25l-1984.25,0l0,-1984.25"/>
<!-- uminho symbol -->
<path fill-rule="nonzero" fill="#ffffff" id="svg_6" d="m1502.43,3514.55528l-378.95,-220.62c-68.8,-39.71 -129.285,64.76 -60.48,104.49l379,220.52c68.88,39.76 129.16,-64.71 60.43,-104.39m-1039.617,-1.46l383.14,-217.25c68.711,-39.66 129.059,64.89 60.172,104.67l-383.203,217.16c-68.77,39.7 -128.938,-64.84 -60.109,-104.58m459.449,-797.92l-0.047,440.75c0,33.37 27.109,60.33 60.379,60.33c33.336,0 60.336,-27.01 60.336,-60.34l-0.05,-440.74c0,-33.28 -26.92,-60.34 -60.286,-60.33c-33.321,0 -60.332,27.01 -60.332,60.33m-379.258,235.44l184.039,104.36c68.863,39.77 8.461,144.3 -60.289,104.6l-183.996,-104.46c-68.774,-39.72 -8.574,-144.24 60.246,-104.5m918.046,-3.45l-179.19,108.08c-68.78,39.7 -8.28,144.18 60.55,104.43l179.14,-108.16c68.72,-39.67 8.4,-144.12 -60.5,-104.35m-478.495,964.28c-33.371,0 -60.293,-27.05 -60.293,-60.33l-0.047,-211.59c0,-33.32 27.012,-60.34 60.34,-60.34c33.265,0 60.375,26.98 60.375,60.34l-0.05,211.59c0,33.32 -27,60.33 -60.325,60.33"/>
<!-- ec symbol + blue background -->
<path fill-rule="nonzero" fill="#8cbce8" id="svg_5" d="m1984.25,2291.02528l1984.26,0l0,1984.25l-1984.26,0l0,-1984.25"/>
<!-- ec symbol -->
<path fill-rule="nonzero" fill="#ffffff" id="svg_4" d="m3540.85,3037.67528l-100.97,183.1c-39.72,68.79 -144.26,8.6 -104.58,-60.12l101.07,-183.06c39.74,-68.84 144.12,-8.57 104.48,60.08m-17.75,558.93c0,33.34 -27.02,60.24 -60.29,60.24l-211.41,0.05c-33.3,0 -60.28,-27 -60.28,-60.29c0,-33.25 26.94,-60.34 60.28,-60.34l211.41,0.05c33.31,0 60.29,26.99 60.29,60.29m-362.52,-738.96c16.65,28.85 6.78,65.71 -22.07,82.36c-28.87,16.67 -65.68,6.72 -82.31,-22.09l-105.75,-183.06c-16.65,-28.84 -6.77,-65.71 22.07,-82.36c28.79,-16.62 65.73,-6.83 82.4,22.04l105.66,183.11zm-150.24,974.55c16.66,28.85 6.77,65.71 -22.06,82.36c-28.88,16.67 -65.69,6.72 -82.32,-22.09l-105.75,-183.06c-16.65,-28.84 -6.76,-65.71 22.07,-82.36c28.8,-16.62 65.73,-6.83 82.4,22.05l105.66,183.1zm-241.49,-862.5c0,33.25 -26.96,60.34 -60.29,60.34l-211.42,-0.05c-33.29,0 -60.29,-27 -60.29,-60.29c-0.01,-33.35 27.04,-60.24 60.29,-60.24l211.4,-0.05c33.31,0 60.31,26.99 60.31,60.29m-146.85,428.75l-105.75,183.06c-16.63,28.81 -53.44,38.76 -82.31,22.09c-28.84,-16.65 -38.72,-53.51 -22.07,-82.36l105.66,-183.1c16.67,-28.88 53.61,-38.67 82.4,-22.05c28.83,16.65 38.72,53.52 22.07,82.36"/>
</g>
</g>
</g>
</g>
</svg>
</body></html>
Now we need a means to send the content to a PDF writer and here I use Edge but you can of course use Chrome. On Windows you may need to run that as Admin, it should only take a few seconds even on a slow 32bit win 7 device as I am currently on.
Note older windows may need --disable-gpu but should not now be needed since 7 is expired.
"C:\Program Files\Microsoft\Edge\Application\msedge.exe" --headless --run-all-compositor-stages-before-draw --print-to-pdf="%USERPROFILE%\desktop\OUTlogo.pdf" --print-to-pdf-no-header "%USERPROFILE%\Desktop\Logo.html"
How to make SVGs safe to use?
I'm creating a custom set of icons for a design system. I would like to know whether there are security vulnerabilities by using: 1-Inline SVG <svg class="svg-inline--fa fa-search fa-w-16 form-control-feedback" aria-hidden="true" data-prefix="fa" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg> 2-Calling the file hosted in the server <img class="img-fluid" src="images/search.svg"> 3-Not using them at all and create custom icon fonts instead. However, the maintenance is much higher for both designer and developer, not considering that in some situations they might not load properly.
SVG text display issue in Safari
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?
Convert DVI to SVG with dvisvgm issue
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.