Related
I want to give space between word in my text while I'm creating a PDF document but I do not know how I can do this.
This is my code:
firstPage.drawText(`2 5 5 5 5 5 5 5`, {
x: 274,
y: 655,
font: courierBoldFont,
size: 15,
color: rgb(0, 0.5, 1),
});
I want space between word while adding string into it but I do not know. I want result like this 5 5 5 5 5 5 5 but string is displaying too close in the PDF like this 55555555555555
Using courier font the inter character spacing should be perfectly even as it is monospaced, just add extra spacing to suit as you have done.
Your code should look spaced out like this, however I suspect your font definition courierBoldFont, may be wrong
Wrong definition of courier bold is not the same large spaces
I used sample https://jsfiddle.net/Hopding/rxwsc8f5/13/
to test courier behaviour so try your your code and versions of
<script src="https://unpkg.com/pdf-lib#1.4.0"></script>
<script src="https://unpkg.com/downloadjs#1.4.7"></script>
to replace sample and see if its results differ when using courier
I have a barplot in latex in tikz, that I want to scale (reduce width, increase length), but without the text having the same effect.
\begin{figure}
\centering
\resizebox{0.8\textwidth}{1.3\textwidth}{
\begin{tikzpicture}
\pgfplotsset{every tick label/.append style={font=\tiny}}
\begin{axis}[ xmajorgrids=true,
xbar, xmin=0,
xlabel={Gini Coefficient, OECD Countries \%},
symbolic y coords={{Australia},{Austria},{Belgium},{Canada},{Chile},{Costa Rica},{Czech Republic},{Denmark},{Estonia},{Finland},{France},{Germany},{Greece},{Hungary},{Iceland},{Ireland},{Israel},{Italy},{Japan},{Korea},{Latvia},{Lithuania},{Luxembourg},{Mexico},{Netherlands},{New Zealand},{Norway},{Poland},{Portugal},{Slovak Republic},{Slovenia},{South Africa},{Spain},{Sweden},{Switzerland},{Turkey},{United Kingdom},{United States}},
ytick=data,
nodes near coords, nodes near coords align={horizontal},
ytick=data,
]
\addplot[fill=blue!90,draw=black!70,tickwidth = 0pt,bar width=4pt,label style={font=\small}, tick label style={font=\small}] coordinates {(0.33,{Australia}) (0.284,{Austria}) (0.266,{Belgium}) (0.307,{Canada}) (0.454,{Chile}) (0.48,{Costa Rica}) (0.253,{Czech Republic}) (0.263,{Denmark}) (0.314,{Estonia}) (0.266,{Finland}) (0.291,{France}) (0.294,{Germany}) (0.333,{Greece}) (0.288,{Hungary}) (0.255,{Iceland}) (0.297,{Ireland}) (0.344,{Israel}) (0.328,{Italy}) (0.339,{Japan}) (0.355,{Korea}) (0.346,{Latvia}) (0.378,{Lithuania}) (0.304,{Luxembourg}) (0.458,{Mexico}) (0.285,{Netherlands}) (0.349,{New Zealand}) (0.262,{Norway}) (0.284,{Poland}) (0.331,{Portugal}) (0.241,{Slovak Republic}) (0.244,{Slovenia}) (0.62,{South Africa}) (0.341,{Spain}) (0.282,{Sweden}) (0.296,{Switzerland}) (0.404,{Turkey}) (0.351,{United Kingdom}) (0.391,{United States})};
\end{axis}
\end{tikzpicture}
}
\caption{\small{Gini coefficient, OECD countries, 2017 or latest available, source: \url{https://data.oecd.org/inequality/income-inequality.htm}}}
\label{fig:giniOECD}
\end{figure}
I would like the bar charts a bit further apart to each other, the blank areas on top and at the end to be removed, the markers (text within the chart that show the values) to be smaller and all the text to be at normal scale, not skewed like that.
Never ever use \resizebox (or \scalebox) for things that contain text.
to set the height and the width of a pgfplot, the height and width keywords can be used
don't put formatting instructions in arguments of macros like \caption. If you want the caption in another font size, you can adjust it with the help of the caption package
\documentclass{article}
\usepackage{pgfplots}
\usepackage{hyperref}
\usepackage[font=small]{caption}
\begin{document}
\begin{figure}[htbp]
\centering
\begin{tikzpicture}
\pgfplotsset{%
width=.8\textwidth,
height=1.5\textwidth
}
\begin{axis}[
xmajorgrids=true,
xbar,
xmin=0,
xlabel={Gini Coefficient, OECD Countries \%},
symbolic y coords={{Australia}, {Austria}, {Belgium}, {Canada}, {Chile}, {Costa Rica}, {Czech Republic}, {Denmark}, {Estonia}, {Finland}, {France}, {Germany}, {Greece}, {Hungary}, {Iceland}, {Ireland}, {Israel}, {Italy}, {Japan}, {Korea}, {Latvia}, {Lithuania}, {Luxembourg}, {Mexico}, {Netherlands}, {New Zealand}, {Norway}, {Poland}, {Portugal}, {Slovak Republic}, {Slovenia}, {South Africa}, {Spain}, {Sweden}, {Switzerland}, {Turkey}, {United Kingdom}, {United States}},
ytick=data,
nodes near coords,
nodes near coords align={horizontal},
enlarge y limits=0.02,
]
\addplot[fill=blue!90,draw=black!70,tickwidth = 0pt,bar width=4pt,label style={font=\small}, tick label style={font=\small}] coordinates {(0.33,{Australia}) (0.284,{Austria}) (0.266,{Belgium}) (0.307,{Canada}) (0.454,{Chile}) (0.48,{Costa Rica}) (0.253,{Czech Republic}) (0.263,{Denmark}) (0.314,{Estonia}) (0.266,{Finland}) (0.291,{France}) (0.294,{Germany}) (0.333,{Greece}) (0.288,{Hungary}) (0.255,{Iceland}) (0.297,{Ireland}) (0.344,{Israel}) (0.328,{Italy}) (0.339,{Japan}) (0.355,{Korea}) (0.346,{Latvia}) (0.378,{Lithuania}) (0.304,{Luxembourg}) (0.458,{Mexico}) (0.285,{Netherlands}) (0.349,{New Zealand}) (0.262,{Norway}) (0.284,{Poland}) (0.331,{Portugal}) (0.241,{Slovak Republic}) (0.244,{Slovenia}) (0.62,{South Africa}) (0.341,{Spain}) (0.282,{Sweden}) (0.296,{Switzerland}) (0.404,{Turkey}) (0.351,{United Kingdom}) (0.391,{United States})};
\end{axis}
\end{tikzpicture}
\caption{Gini coefficient, OECD countries, 2017 or latest available, source: \url{https://data.oecd.org/inequality/income-inequality.htm}}
\label{fig:giniOECD}
\end{figure}
\end{document}
I recently created a vector image on Adobe Illustrator and now the SVG file is only creating the initial stages of the design before coming up with an error:
"error on line 353 at column 77: Namespace prefix inkscape for original on path is not defined"
My aim is to recover the file, or at least most of it, so I don't have to recreate it all from scratch again
I have already search Stackoverflow and found a number of pages with similar issues, but none of them seem to have worked (Though this may be due to my inexperience). I have tried to delete the section of code, but that just bugs out the next line.
<g id="g15008_6_" transform="matrix(0.08741528,-0.2790867,-0.2187316,-0.04878567,559.67434,1071.9284)">
<path id="path15012_6_" inkscape:original="M 777.03125 425.3125 C 768.33974 425.44114 761.38075 427.77622 758.21875 432 C 754.17515 429.77494 753.40566 434.1846 753.8125 433.78125 C 762.55281 449.54413 772.13283 446.95767 782.90625 443.96875 C 787.01791 442.78165 791.56668 441.35498 795.46875 439.375 C 803.5544 437.78559 801.04722 435.98205 801.96875 433.65625 C 803.43347 428.93203 792.51988 426.16857 786.21875 425.9375 C 783.0142 425.48504 779.92842 425.26962 777.03125 425.3125 z " inkscape:radius="-2.8900177" sodipodi:type="inkscape:offset" class="st18" d="
M416.7,1473c-16.9-41.3-23.3-76.9-20-94.6c0.9-4.7,0-10.6-2.4-15.4c21.7,6,34.5,17.8,43.5,33.5c10.4,18,17,43.8,24.4,73.9
c5.4,22.8,10.9,47.8,13.6,69.6c0.2,1.4,0.5,2.9,0.9,4.3c3,10.3,4.4,16.9,4.9,20.3c0.5,3.4,0.1,2.7,0.4,1.7
c0.3-0.9,0.6-0.8-0.7,0.3c-1.3,1.2-3.9,3.3-6,7.9l0.4-0.8c-0.3,0.5,0.9,0.6-1.3-0.7s-6.4-5.3-10.9-11.3c-9.1-12-19.9-31.2-26-45
c-0.2-0.5-0.5-1-0.7-1.4C429.1,1501,422.3,1486.8,416.7,1473L416.7,1473z"/>
You should be able to open the file with Inkscape. Choose Save as...Plain SVG. The saved file will be rid of all inkscape: and sodipodi: namespace prefixes that only Inkscape understands.
I am writing an SVG file that fits the shapes inside an artboard, by using the viewBox attribute. In Inkscape, the shapes are inside the artboard. But in Adobe Illustrator, the shape is placed above the artboard (vertically). How should I make the art fit for any software the SVG is going to be opened with?
The shape below forms the Z character. The svg code :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
width="22.640625" height="28.640625" viewBox="0.796875 -28.640625 22.640625 28.640625" >
<path d=" M 0.796875, 0.0 L 0.796875, -3.515625 L 15.46875, -21.859375 Q 17.03125, -23.8125 18.4375, -25.25
L 2.46875, -25.25 L 2.46875, -28.640625 L 22.96875, -28.640625 L 22.96875, -25.25 L 6.890625, -5.390625
L 5.15625, -3.375 L 23.4375, -3.375 L 23.4375, 0.0 L 0.796875, 0.0 Z"/>
</svg>
And the appearance in Illustrator:
I don't believe illustrator reads in viewbox info when opening an svg. It just uses the width and height and draws the artboad from 0,0. If your paths have any negative values or values larger than the respective width or height, they will appear off of the dartboard. If you make your files in illustrator, a new document will export its artboard coordinates as viewbox coordinates starting at 0,0 and should open correctly in other programs. If you are going to create images in other software to open in illustrator, you need to set your document up so that the viewbox starts at 0,0 and the path all have positive coordinates. That process will likely be different in various vector apps.
Is it possible to set a transparency or alpha level on SVG fill colours?
I've tried adding two values to the fill tag (changing it from fill="#044B94" to fill="#044B9466"), but this doesn't work.
You use an addtional attribute; fill-opacity: This attribute takes a decimal number between 0.0 and 1.0, inclusive; where 0.0 is completely transparent.
For example:
<rect ... fill="#044B94" fill-opacity="0.4"/>
Additionally you have the following:
stroke-opacity attribute for the stroke
opacity for the entire object
As a not yet fully standardized solution (though in alignment with the color syntax in CSS3) you can use e.g fill="rgba(124,240,10,0.5)". Works fine in Firefox, Opera, Chrome.
Here's an example.
fill="#044B9466"
This is an RGBA color in hex notation inside the SVG, defined with hex values. This is valid, but not all programs can display it properly...
You can find the browser support for this syntax here: https://caniuse.com/#feat=css-rrggbbaa
As of August 2017: RGBA fill colors will display properly on Mozilla Firefox (54), Apple Safari (10.1) and Mac OS X Finder's "Quick View". However Google Chrome did not support this syntax until version 62 (was previously supported from version 54 with the Experimental Platform Features flag enabled).
As of April 2021, Inkscape version 1.0.2 cannot read this format in SVG files, and instead converts any RGBA color to opaque black. The bug report is here: https://gitlab.com/inkscape/inbox/-/issues/1195
To make a fill completely transparent, fill="transparent" seems to work in modern browsers. But it didn't work in Microsoft Word (for Mac), I had to use fill-opacity="0".
Update
As per the comment below from Alex Henrie, fill="none" might be a better choice.
Use attribute fill-opacity in your element of SVG.
Default value is 1, minimum is 0, in step use decimal values EX: 0.5 = 50% of alpha. Note: It is necessary to define fill color to apply fill-opacity.
See my example.
References.
To change transparency on an svg code the simplest way is to open it on any text editor and look for the style attributes. It depends on the svg creator the way the styles are displayed. As i am an Inkscape user the usual way it set the style values is through a style tag just as if it were html but using svg native attributes like fill, stroke, stroke-width, opacity and so on. opacity affects the whole svg object, or path or group in which its stated and fill-opacity, stroke-opacity will affect just the fill and the stroke transparency. That said, I have also used and tasted to just use fill and instead of using#fff use instead the rgba standard like this rgba(255, 255, 255, 1) just as in css. This works fine for must modern browsers.
Keep in mind that if you intend to further reedit your svg the best practice, in my experience, is to always keep an untouched version at hand. Inkscape is more flexible with hand changed svgs but Illustrator and CorelDraw may have issues importing and edited svg.
Example
<path style="fill:#ff0000;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>
Example 2
<path style="fill:#ff0000;fill-opacity:.5;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>
Example 3
<path style="fill:rgba(255, 0, 0, .5);stroke:rgba(242, 242, 242, .5);stroke-width:2px" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>
Notice that in the last example the fill-opacity and stroke-opacity have been removed as rgba standard covers both color and alpha channel in both cases.
I am sharing a related tip that you might come across when you want the SVG to inherit the container's styles like normal state, hover state and visited state :
use fill='currentColor' on the path. This is how the SVG's produced by font awesome icons could take any fore color applied to fonts!