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>
Related
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>
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.
I am facing an issue in which I have to dynamically set the font color regarding the background image brightness.
For instance, if the background image is dark, I would put font color on 'white'.
Is there any tool that can give my the brightness of the image using React-Native?
This seems to be a similar question as mentioned in How to access image pixel data in react-native
Step 1
The marked answer shows a solution in wich create a native (android) function wich returns a object that contains among other things an array filled with the color of every pixel (width, height, hasAlpha and pixels).
Step 2
I am no graphic designer so I am not a 100% sure if this is correct but it sounds ok. As mentioned in the question Image Dark/Light Detection Client Sided Script
JavaScript provides a function that converts each color to gray scale and then returns an average pixel. I don't actually know if react-native provides this function - try it and then I will change the answer to this step.
Step 2.1 - Converting to gray scale
I my understanding it's just that easy:
* Indigo Color Example as you can see in the color detail you have 3 different parts - R (81) G (43) B (219)
* Add these three for each pixel and divide them with 3
* 81+43+219 = 343 / 3 = 114,3 -> 114 = grayscale
Step 2.2 - Adding all grayscales together and divide through sum
All your pixel should be able to transfaired into grayscale. There you can go and add them together and divide it through the amount of pixels you got
Step 3
There is my most questionable point where you maybe have to try it yourself. I would say if 0 is the minimum (dark) and 255 is the maximum (white) the middle 127 is where you decide if the color is dark or white
Examples for dark or light colors
127 is where we decide to go dark or light
Misty Rose graycolor = 236 = light
Indigo Color Example graycolor = 114 = dark
#46bfb0 graycolor = 145 = light
Misty Rose 4 graycolor = 129 = light
#72632f graycolor = 87 = dark
This short experiment by me showed me that 127 as line is maybe not perfect if you look at #46bfb0 it could be dark instead of light - so test it out and please commend your solutions with this project.
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.