Fontforge: How to "remove overlaps" making work - svg

I create an arrow in TikZ and convert it to svg (pdf2svg file.pdf file.svg).
Then I import my output.svg into FontForge and choose there Element --> Overlap --> remove.
Finally I put the character \symbol{65} into a tex-document, but I have still these 'overlaps' in form from white space inside the sign.
Could somebody help me to create the sign correctly?
% arara: lualatex
\documentclass[varwidth, margin=15mm]{standalone}
\usepackage{tikz}
\usepackage{fontspec}
\newfontfamily{\myfont}[Scale=1]{myfont.ttf}
\begin{document}
\textbf{For output and svg-conversion}
\begin{tikzpicture}[line width=5mm]
\draw[-stealth] (0,0) -- (5,0);
\end{tikzpicture}
\textbf{Input from myfont.ttf}
\myfont\Huge\symbol{65}
\end{document}
Working Folder with
test.tex
test.pdf
output.svg
myfont.ttf (only 1 character at No. 65)
https://drive.google.com/file/d/1j2TEubR7IMu91wA4G7Mda4bqG9ddP5sg/view?usp=sharing

If the number of arrows is not too big, you can post-process the svg file with inkscape
select all and ungroup a couple of times
now use Stroke to Path option
and finally union all the shapes
This will result in an svg file like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg2"
xml:space="preserve"
width="321.26001"
height="132.284"
viewBox="0 0 321.26001 132.284"
sodipodi:docname="document.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs6" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview4"
showgrid="false"
inkscape:zoom="2.2729107"
inkscape:cx="160.63"
inkscape:cy="62.842265"
inkscape:current-layer="g10" /><g
id="g10"
inkscape:groupmode="layer"
inkscape:label="document"
transform="matrix(1.3333333,0,0,-1.3333333,0,132.284)"><path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:18.89785385;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 206.78906 41.976562 L 217.82617 56.693359 L 66.140625 56.693359 L 66.140625 75.591797 L 217.82617 75.591797 L 206.78906 90.308594 L 255.11914 66.142578 L 206.78906 41.976562 z "
transform="matrix(0.75000002,0,0,-0.75000002,0,99.213002)"
id="path18" /></g></svg>

Related

Inkscape 0.92 - How to Get SVG Path Coordinates?

Inkscape saves paths as relative instead of absolute, hence:
0, 0, 100, 0, 100, 100, 0, 100
becomes:
M -0.06681738,270.60714 H 26.5265 V 297 H 0 Z
Apparently, in previous versions of Inkscape (0.4), it was possible to change this by switching Path data value from Relative to Absolute, however, this no longer works.
There was also a Java-based converter, which I was unable to run.
I would write my own converter in Python, if I knew what these values meant.
Edit whole code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg8"
version="1.1"
viewBox="0 0 26.458333 26.458334"
height="100"
width="100">
<defs
id="defs2" />
<g
transform="translate(0,-270.60714)"
id="layer1">
<path
id="path815"
d="M -0.06681738,270.60714 H 26.5265 V 297 H 0 Z"
style="fill:none;stroke:#000000;stroke-width:1.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</svg>

Large user coordinates in SVG

I cannot get coordinate systems with large values to work. The renderer seems to just treat them as pixel values. For example:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="100%" height="100%"
viewBox="0 0 50000 50000"
>
<circle cx="25000" cy="25000" r="10px" fill="red" />
</svg>
This uses a user coordinate system of a 50000 x 50000 square in the center of which should be a red dot, but no dot appears.

How to fill a Donut Shape drawn with a Path Element without using fillRule EvenOdd

Hey guys I'll need your help since Google didn't helped me.
My goal is to understand the svg path's and draw a circle in a circle.
The final result should be a ring because I expect that the 2nd circle is masking the first one. I found a svg which is doning this and in general it is doing the same like me but with more steps. Moving to a start point, drawing the first circle, moving to the start point of 2nd circle, drawing the second circle and close the path. I don't know what I do wrong that my paths are not masked.
I can't use fill style evenodd because i want to import the svg into fontello.
Could you tell me what i did wrong in the second svg that the second circle is not masking the first?
The working sample svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="0.52777803in" height="0.52777803in" viewBox="-2 -2 42 42" id="svg2">
<path d="m 19,-0.5
C
33.588007,4.3721285 38.5,9.3333333 38.5,19
38.5,28.666667 33.588007,33.627872 28.71875,36.0625
23.849493,38.4971 19,38.5 19,38.5
19,38.5 14.150507,38.4971 9.28125,36.0625
4.411993,33.627872 -0.5,28.666667 -0.5,19
-0.5,9.3333333 4.411993,4.3721285 9.28125,1.9375
14.150507,-0.497128 19,0 19,0
19,0 23.650507,0.497128 28.28125,2.8125
32.911993,5.1278715 37.5,9.6666667 37.5,19
37.5,28.333333 32.911993,32.872128 28.28125,35.1875
23.650507,37.502872 19,37.5 19,37.5
19,37.5 14.349493,37.5029 9.71875,35.1875
5.088007,32.872128 0.5,28.333333 0.5,19
0.5,9.6666667 5.088007,5.1278715 9.71875,2.8125
14.349493,0.49712848 19,0.5 19,0.5
m 0,4
C 19,4.5 15.349493,4.49713 11.71875,6.3125
8.088007,8.1278715 4.5,11.666667 4.5,19
4.5,26.333333 8.088007,29.872128 11.71875,31.6875
15.349493,33.5029 19,33.5 19,33.5
c 0,0 3.650507,0.0029 7.28125,-1.8125
C 29.911993,29.872128 33.5,26.333333 33.5,19
33.5,11.666667 29.911993,8.1278715 26.28125,6.3125
22.650507,4.49713 19,4 19,4
19,4 15.150507,3.50287 11.28125,5.4375
7.411993,7.3721285 3.5,11.333333 3.5,19
3.5,26.666667 7.411993,30.627872 11.28125,32.5625
15.150507,34.497128 19,34.5 19,34.5
c 0,0 3.849493,-0.0029 7.71875,-1.9375
C 30.588007,30.627872 34.5,26.666667 34.5,19
34.5,11.333333 30.588007,7.3721285 26.71875,5.4375
22.849493,3.5028715 19,3.5 19,3.5 z" />
</svg>
My own not working svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" viewBox="0 0 500 500">
<path d="m250 0
c333 0 333 500 0 500-333 0-333-500 0-500
m0 10
c315 0 315 480 0 480-315 0-315-480 0-480z" />
</svg>
You have to draw the second circle in the opposite direction to the first if you don't want to use evenodd. Read how fill rules work in svg.
<path stroke="blue" d="m250 0
c333 0 333 500 0 500-333 0-333-500 0-500
m0 10
c-315 0 -315 480 0 480
315 0 315 -480 0 -480" />
</svg>

Using multiple svg transformations at the same time.

Is it possible to use use multiple transformations on the same svg ? I have a transform="translate(-186.57429,-373.01893)" already in my code but I want to reduce the size of the image to half using scale(0.5).
I haven't been able to find an answer to this, maybe bad Googling skills on my part. Any help will be appreciated. Here is the SVG code
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32.2"
height="37"
id="svg2"
version="1.1"
inkscape:version="0.48.2 r9819"
sodipodi:docname="comment.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8"
inkscape:cx="51.134813"
inkscape:cy="31.956267"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1147"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
preserveAspectRatio="xMinYMin"/>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-186.57429,-373.01893)">
<path
style="fill:#ececec;stroke:#ececec;stroke-width:0.70775092px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 207.25539,445.72259 c 8.18855,-4.77517 9.49259,-8.30548 9.49259,-8.30548 0,0 -18.93579,3.54059 -24.23426,-3.35689 -5.29848,-6.89746 -8.67023,-55.71033 -1.44504,-58.3632 7.22519,-2.65288 50.58563,-4.2446 55.88411,2.12229 5.29847,6.3669 4.81679,51.99632 -0.48168,56.77149 -5.29848,4.77517 -18.5529,3.01002 -18.5529,3.01002 0,0 -7.65748,6.53005 -20.66282,8.12177 z"
id="path2985"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccsssscc" />
</g>
</svg>
You can just pass another transform definition for the scale:
<g transform="scale(0.5 0.5) translate(-186.57429 -373.01893)">
From the MDN docs on transform:
The transform attribute defines a list of transform definitions that
are applied to an element and the element's children. The items in the
transform list are separated by whitespace and/or commas, and are
applied from right to left.
Alternatively, you can pass a transformation matrix to apply both scale and translate:
<g transform="matrix(0.5 0 0 0.5 -186.57429 -373.01893)">
How does it work? Transformation matrices have six attributes, as can be seen by examining the arguments in the above snippet - matrix(<a> <b> <c> <d> <e> <f>).
Each argument maps to a parameter of the transformation in the following manner:
<a> - scale X
<b> - skew Y
<c> - skew X
<d> - scale Y
<e> - translate X
<f> - translate Y

create text inside a rectangle using inkscape

I've put some text inside a rectangle using inkscape so the tree is like
<svg:rect><svg:text><svg:tspan>text....
The problem is, I can't see the text. I've tried fiddling with the opacity of the rect to no avail. There should be a way of doing this from the UI?
Edit
example as requested
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="184.25197"
height="262.20471"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.46"
version="1.0"
sodipodi:docname="ex1.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape">
<defs
id="defs4">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 526.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective10" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
gridtolerance="10000"
guidetolerance="10"
objecttolerance="10"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.64"
inkscape:cx="195.9221"
inkscape:cy="335.3072"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="640"
inkscape:window-height="675"
inkscape:window-x="44"
inkscape:window-y="44" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="opacity:0.25480766;fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:12.94795799;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2383"
width="150.87796"
height="84.226181"
x="18.221733"
y="39.557121">
<text
xml:space="preserve"
style="font-size:56.0331955px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
x="44.815186"
y="114.0088"
id="text2385"
transform="scale(1.0054479,0.9945816)"><tspan
sodipodi:role="line"
id="tspan2387"
x="44.815186"
y="114.0088">text</tspan></text>
</rect>
</g>
</svg>
I'd expect to be able to see this in inkscape.
The workaround is to put text on a layer above the box (the intent is that the box obscures the layers below it) and not try and get clever with nested tags. Shame it doesn't work though.
A rect element can't contain text elements, that's invalid according to the svg specification and will simply be ignored by compliant user agents.
Just put the text after the rect element to have them render on top.

Resources