"Namespace Prefix Inkscape" error in an SVG file - svg

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.

Related

Embedding content of SVG file in latex document

I'm computing a plot and have the data in 'SVG' format as string in memory. I'd like to use that SVG string in a latex document, which is also being produced by computation.
I could save the file to my disk and then use the file in my latex document. However I'd prefer to simply put the string with the content of the SVG data directly in my latex document. How can I do that?

If your svg plot is not too complicate, you could use the svg path operation of tikz:
\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{svg.path}
\begin{document}
\begin{tikzpicture}
\draw svg {M 0 0 L 20 20 h 10 a 10 10 0 0 0 -20 0};
\end{tikzpicture}
\end{document}

How do you use an svg file to set a shape of a button in javafx?

I am attempting to create an image on a button similar to the calendar on DatePicker.
I have attempted to use -fx-shape, same as the date picker, with an svg path, but it does not seem to be working. The code I have in my css is:
.time-picker > .toggle-button {
-fx-shape:"M 43.73,27.84
C 43.73,28.87 42.90,29.71 41.87,29.71
41.87,29.71 26.13,29.71 26.13,29.71
26.13,29.71 26.13,10.11 26.13,10.11
26.13,9.08 26.97,8.24 28.00,8.24
29.03,8.24 29.87,9.07 29.87,10.11
29.87,10.11 29.87,25.97 29.87,25.97
29.87,25.97 41.87,25.97 41.87,25.97
42.89,25.97 43.73,26.81 43.73,27.84 Z
M 56.00,28.00
C 56.00,43.44 43.44,56.00 28.00,56.00
12.56,56.00 0.00,43.44 0.00,28.00
0.00,12.56 12.56,0.00 28.00,0.00
43.44,0.00 56.00,12.56 56.00,28.00 Z
M 52.27,28.00
C 52.27,14.62 41.38,3.73 28.00,3.73
14.62,3.73 3.73,14.62 3.73,28.00
3.73,41.38 14.62,52.27 28.00,52.27
41.38,52.27 52.27,41.38 52.27,28.00 Z";
}
What am I doing wrong here?

The best practice when working on a css file is to be sure that your javafx program is using that css file.

SVG viewBox attribute places shape outside artboard in Illustrator

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.

Convert SVG Image to Path - to use with skrollr

I recently came across Skrollr, an interesting library to achieve a parallax effect. I am using it to control some opacities and would be ideal to make a 'path' ( provided as an SVG image - including coloring and stroke width etc - from the designers ).
I am hoping to animate a SVG image (path) as the user scrolls down as though the line is drawn. This is a nice example from skrollr which uses a similar effect as expected. The used example has a 'path', but what I have is an svg image - which I notice to have many paths. Skrollr seems to be needing an inline SVG path as it seems.
How can I get a similar effect as in the example specified. To get it, I will have to convert the given svg file in to some thing similar to ( from example ):-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="900px" height="1200px">
<path
style="fill:none;stroke:#333333;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"
d="m 199.16266,227.29566 c 0,0 -35.71429,-184.285714 37.14286,-210.000004 72.85714,-25.7142792 95.40137,3.16127 134.28572,42.85715 C 462.01038,153.47988 433.14019,231.62843 612.01981,188.72422 740.78435,157.8401 648.46996,-124.25341 423.44838,73.009946 397.57737,95.689556 342.01981,227.29566 322.01981,268.72423 c -20,41.42857 -15.71429,142.85714 64.28571,222.85714 80,80 143.73919,-10.78923 207.14286,17.14286 89.11717,39.26002 175.71428,70 214.28571,198.57143 38.57143,128.57142 -224.28571,45.71428 -311.42857,50 -87.14286,4.28571 -174.7636,-13.7114 -273.33504,69.14573 -98.57143,82.85724 -123.427376,147.71354 -133.893126,125.93684 -13.988987,-29.1077 -55.031934,-20.6196 -72.436974,2.587 -35.52138,47.36187 48.898892,49.25187 59.501803,81.06057 11.228801,33.6863 -55.491303,91.6685 -70.7122836,61.2265 -14.3563298,-28.7127 55.6559746,-11.2104 68.9875946,-11.2104 59.313946,0 106.207266,-47.3062 135.388156,-93.99577 9.07249,-14.516 16.34065,-34.5597 6.03641,-50.0161 -24.31744,-36.4761 -61.10674,32.1704 -64.67586,50.0161 -1.78804,8.94027 -18.73345,93.13327 -18.9716,93.13327 -15.39093,0 28.03002,-116.70147 77.61105,-83.6473 22.80402,15.2025 -31.82409,33.8676 -43.11725,31.0443 -2.54514,-0.6362 -14.1213,-7.4374 -16.38456,-5.174 -1.98676,1.9867 9.07416,13.8365 10.34816,16.3845 2.87494,5.7499 10.51739,15.8661 17.24688,18.1092 69.57702,23.1924 68.47583,-63.69675 106.93079,-50.8783 25.47788,8.4926 17.93869,61.2265 13.79751,61.2265 -4.54633,0 1.86112,-32.5889 2.58704,-36.2185 1.63481,-8.1741 -8.336,-25.008 0,-25.008 23.1702,0 56.38131,-4.3117 84.50982,-4.3117 6.92267,0 20.69627,8.6474 20.69627,1.7246 0,-22.13767 -106.83933,7.883 -73.29932,52.6031 15.39517,20.5269 45.97363,7.0247 56.91476,-11.2104 4.27342,-7.1224 5.92963,-41.2859 6.03643,-41.3927 3.30032,-3.3003 25.38957,-5.1906 31.04441,-7.7611 8.17799,-3.71727 116.56888,-61.61957 80.19809,-70.71237 -62.06519,-15.5162 -84.81857,132.80117 -47.42898,132.80117 39.83429,0 168.06934,-127.94377 127.62705,-141.42457 -48.77358,-16.2579 -78.2302,99.41297 -51.74069,125.90247 20.35735,20.3573 58.34681,-22.9907 73.29932,-37.9432 37.20757,-37.20767 16.38455,62.9731 16.38455,52.603 0,-50.488 -2.86125,-72.28997 41.39257,-61.2265 18.42188,4.6055 41.59056,-2.80515 61.22649,0 33.65343,4.8077 18.48038,96.0268 157.85652,147.0903"
/>
</svg>
Resources:
Image: https://gist.github.com/ziyan-junaideen/3f3ffc99d6812ff78717
Example: https://github.com/Prinzhorn/skrollr/blob/master/examples/path.html

SVG fill color transparency / alpha?

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!

Resources