I am drawing music slurs with Bézier's curves in SVG, in order to visualize them in the browser and allow a pdf export.
It works fine. But if you zoom in you can see that there is a line connecting the two vertices: I need to get rid of that line.
In Inkscape, the line is not there, but it does appear in all browsers (especially Chrome), even if it's practically invisible. My problem is that when you print it as a PFD (I just click ctrl+P and save the file) that line becomes much thicker, and the music sheet cannot be published like that!
Here is my path:
<svg height="150px" width="100%"><path d="M 28 39 q 15 29 40 -13 M 28 39 q 15 25 40 -13" stroke="black" stroke-width="0.5" fill="black" fill-rule="evenodd"></path></svg>
Could you please suggest any way to fix this?
curve in Chrome
curve in pdf export
The problem is with the way you have created your shape.
It consists of two individual shapes that you merged together into one path. See the example below where I have given the two subpaths different colours.
<svg width="400px" viewBox="0 0 70 60">
<path d="M 28 39 q 15 29 40 -13" fill="red" opacity="0.5"/>
<path d="M 28 39 q 15 25 40 -13" fill="green" opacity="0.5"/>
</svg>
Notice the top of the shape where the two sub-paths (red and green) share an edge? There is effectively an incredibly thin rectangle along that edge, formed by the edges of the two sub-paths. When the path is rendered to the screen, slight differences in the way the two shapes are drawn, can sometimes cause some pixels to be visible along that edge. That can give the appearence of a light grey line there.
This is also why you needed to add fill-rule="evenodd"to your path. It is so that one sub-path makes a hole in the other. Otherwise they would both be drawn solid.
<svg width="400px" viewBox="0 0 70 60">
<path d="M 28 39 q 15 29 40 -13 M 28 39 q 15 25 40 -13" fill="black"/>
</svg>
The fix is to make sure your shape is one path only. Not two sub-paths. The path should go around the boundary of your shape. From one side to the other and then back along the other side.
<svg width="400px" viewBox="0 0 70 60">
<path d="M 28 39 q 15 29 40 -13 q -25 38 -40 13 Z" fill="black"/>
</svg>
So the fixed version of your original SVG would be as follows:
<svg height="150px" width="100%"><path d="M 28 39 q 15 29 40 -13 q -25 38 -40 13 Z" stroke="black" stroke-width="0.5" fill="black" fill-rule="evenodd"></path></svg>
Related
I am creating a mobile application with an image editor using react native. I am using react native svg's LineTo (L) function to draw the lines (as shown in the image). Is there a way to make the path smoother?
In order for your editor to have the opportunity to draw lines with smooth transitions, you need to add the functionality of drawing bezier curves to it.
For example, as #Peter Collingridge's Bezier Curve Generator did
Using Bezier curves, your curve will look like this
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50%" height="50%" viewBox="0 0 988 1132" preserveAspectRatio="xMinYMin meet">
<path d="m572.1 38c0 0-31.9-1.7-46 4.6-61.6 27.5-108 83.2-149.6 136.4-38 48.6-66.9 104.9-88.2 162.8-21.7 59.1-35.4 122-39 184.8-2.5 43.1-2 88 11.9 128.9 16.3 48.1 41.6 97.2 81.4 128.9 46.9 37.3 109.8 56.4 169.6 59.4 59.8 3 119.4-19.3 174.7-42.4 23.9-10 46.2-23 66.1-40.7 19.9-17.8 35.6-40.6 47.5-64.4 12.4-24.8 22.1-52 23.7-79.7 1.4-23.5-1.5-48.4-11.9-69.5-7.7-15.8-16.9-30.2-35.6-39-35.4-16.7-80.4-18.6-117-5.1-96.4 35.6-205.4 182.9-225.5 210.3-22.1 30.1-72.2 126.1-93.3 195-8.9 29.2-11.7 60-13.4 90.5-0.6 12.2 1.5 36.7 1.5 36.7" style="fill:none;stroke-width:8;stroke:#e91d1d; stroke-linecap:round"/>
</svg>
Consider the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 20">
<g shape-rendering="crispEdges">
<rect x="0" y="0" width="20" height="20" fill="#b4b4b4"/>
<rect x="20" y="0" width="20" height="20" fill="#b4c4b4"/>
</g>
</svg>
The intended effect of the shape-rendering="crispEdges" annotation is to prevent there being a visible seam between the two rectangles, no matter how the rendering is scaled. This works as intended when viewing the SVG file in both Firefox and Chromium. However, when I convert the SVG into a PDF using inkscape -A and view the PDF, I can still see a visible seam at some zoom levels, e.g. as in this screen shot:
Moreover, the PDF page stream produced by inkscape is identical with and without shape-rendering="crispEdges"
1 0 0 -1 0 15 cm
q
0.705882 0.705882 0.705882 rg /a0 gs
0 0 15 15 re f
0.705882 0.768627 0.705882 rg 15 0 15 15 re f
Q
and the /ExtGState dictionary referenced as /a0 is also identical:
/ExtGState <<
/a0 <<
/CA 1
/ca 1
>>
>>
This could mean that there is no equivalent in PDF of this SVG feature, or it could mean that Inkscape's PDF exporter doesn't implement the equivalent. I'm not having any luck finding anything that sounds like this SVG feature in the PDF specification, which is an argument in favor of "no equivalent", but the PDF spec is gigantic and I could easily have missed something.
So the question is: Is or isn't there an equivalent in PDF of this SVG feature, and if there is, how do I use it? I am prepared to edit my exported PDF by hand if I have to.
Note 1: The example is minimal; I originally noticed the problem with a much more complicated figure from an academic paper, in which there are many such rectangles aligned to a grid, but some grid positions are empty. I tried enlarging the rectangles in the original figure so they would overlap, and I was not able to find an amount of enlargement that eliminated all visible seams without also visibly causing the rectangles to bleed into the empty spaces.
Note 2: With the original figure, the problem is visible with Evince, pdf.js, and two printers manufactured by different companies.
The closest thing in PDF would be to use shading meshes (e.g. tensor and lattice free form meshes). This will remove the slivers in most viewers.
Some PDF viewers ( like Acrobat, Xodo/PDFTron) have options that minimize the appearance of these slivers, but generally it's not well implemented across many implementations.
When I use ghostscript with textwrite device, I'm getting an XML file that describes my pdf, i.e
<page>
<block>
<line>
<span bbox="95 97 357 97" font="..." size="9.0000">
<char bbox="95 97 106 97" c="a"/>
<char bbox="106 97 117 97" c="b"/>
<char bbox="117 97 126 97" c="c"/>
...
</span>
</line>
</block>
<block>
...
My question is if there is a known scale to the bbox (bounding-box) coordinates (X1,Y1,X2,Y2) or are they page dependent? in any case, can I fetch the page grid in any way to understand its height and width?
My main point here is too understand features like if the character was positioned beyond the center of the page etc.
My full command to convert pdf to XML:
ghostscript -q -sPAPERSIZE=a4 -r200 -sDEVICE=txtwrite" -sOutputFile=<output-path.xml> -dTextFormat=1 -dBATCH -dNOPAUSE <input-path.pdf>
The bounding box is in PostScript/PDF units, 1/72 inch. Note that the output isn't really XML, its 'like' XML.
We produce icons in Illustrator as SVGs and then produce font based icons with fontcustom. Out of no where, they were coming in too low. I found in the svg this odd viewBox with a negative 49 on it. How is this controlled in Illustrator? I don't want any viewbox, I just want a perfectly centered icon. I also see that it thinks that it is grouped. My only fix is to ungroup, and then set the X and Y to zero, and it works. It does put in a transform compensating to -49 on the layer. Something is causing this odd offset.
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-49 141 512 512"
style="enable-background:new -49 141 512 512;" xml:space="preserve">
Viewbox in illustrator is based on the art board I believe and it's a pain to get it to match the artwork exactly. The easy way to zero it all out is to just highlight the object in illustrator select copy.. then go to your code editor, make a new document and paste it. It will copy the svg code with a the view box set correctly(starting at 0,0). Then just save the file as an svg and you're done.
How can I make a rounded corner triangle in XAML-Silverlight?
I think the below Path will solve your problem, Only you need to change the points of your triangle according to your requirement. For more idea about Path
<Path Data="M 300 100 L 500 400 100 400 Z"
StrokeThickness="48"
StrokeLineJoin="Round"
Stroke="Blue"
Fill="Blue" />