SVG viewBox attribute places shape outside artboard in Illustrator - svg

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.

Related

Unable to resize this svg file

My following svg file nicely displays the image (shown below) with 512x512 size. I want to convert it to a 32x32 size. But when I change the width and height attributes to 32x32 in the first line of the below file, the image does not even display. If I change it to, say, 100x100, only a portion of the image is displayed. Question: How can I generate a 32x32 size svg image from the following svg file. Or, if this is not possible, is there any other way of generating the image (shown below) as an svg file with size of 32x32?
MySvgFile.svg:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512"><path d="M507.712 311.74c-7.903 0-13.493-0.757-16.772-2.27s-6.599-4.456-9.962-8.827l-62.298-89.284 39.85-57.757c3.363-4.54 7.945-8.66 13.746-12.358s15.343-5.549 28.627-5.549v-8.828h-68.855v8.828c5.549 0 9.878 1.387 12.989 4.161s4.666 5.843 4.666 9.206c0 1.177-0.084 2.312-0.252 3.405s-0.841 2.228-2.018 3.405l-33.293 48.93-37.832-55.74-1.135-1.387c0 0-0.378-0.967-1.135-2.9 0-2.354 1.598-4.456 4.792-6.305s7.567-2.774 13.115-2.774v-8.828h-80.205v8.828h4.54c7.735 0 13.536 0.673 17.403 2.018s6.894 3.699 9.080 7.062l53.47 79.952-46.66 69.108c-2.186 3.363-6.18 7.188-11.981 11.476s-15.932 6.432-30.392 6.432v8.827h16.413c-3.319 17.739-7.947 31.114-13.892 40.103-6.894 10.425-22.531 15.637-46.913 15.637h-37.833c-6.726 0-10.635-0.757-11.728-2.27s-1.639-4.456-1.639-8.827v-75.917h24.465c13.284 0 21.774 2.522 25.474 7.567s5.549 13.704 5.549 25.978h6.81v-75.665h-6.81c0 12.274-1.555 20.892-4.666 25.852s-11.896 7.44-26.357 7.44h-24.465v-69.108c0-4.372 0.547-7.315 1.639-8.827s5.002-2.27 11.728-2.27h35.563c22.195 0 36.445 4.287 42.75 12.863s10.635 22.868 12.989 42.877h6.558l-8.827-64.567h-129.294l-4.381-62.298h-175.795l-4.54 64.567h6.558c2.354-23.372 6.222-38.505 11.602-45.399s18.664-10.341 39.85-10.341h15.386c3.363 0 5.338 1.009 5.927 3.026s0.883 4.708 0.883 8.071v149.313c0 4.372-1.219 7.692-3.657 9.962s-10.888 3.405-25.348 3.405h-13.367v8.827h106.94v-8.827h-9.080c-14.46 0-22.868-1.135-25.221-3.405s-3.531-5.591-3.531-9.962v-149.313c0-3.363 0.168-5.759 0.504-7.188s1.597-2.732 3.784-3.91h15.638c21.186 0 34.469 3.447 39.85 10.341 5.202 6.666 8.907 21.058 11.123 43.129h-21.968v8.827h6.558c11.266 0 17.823 0.841 19.673 2.522s2.774 5.297 2.774 10.845v149.313c0 5.549-0.925 9.164-2.774 10.846s-8.407 2.522-19.673 2.522h-6.558v8.827h164.697l9.763-64.567h48.247v-8.827c-6.726 0-11.392-1.682-13.998-5.045s-3.909-6.137-3.909-8.323c0-1.177 0.084-2.312 0.252-3.405s0.841-2.228 2.017-3.405l40.103-60.028 44.39 69.107c0 1.009 0.378 1.598 1.135 1.765l1.135 0.252c0 2.354-1.555 4.456-4.666 6.305s-7.44 2.774-12.989 2.774v8.827h79.952v-8.827h-4.288z"></path></svg>
Image display of the above svg file:

Here is a codepen on how to do it, to add to my comment, viewBox does it all here. :)
https://codepen.io/kissu-the-styleful/pen/yLaQwOq
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
EDIT: Great website to understand viewBox a bit more !
https://wattenberger.com/guide/scaling-svg

How can we define a color for each line in an SVG path

I'am working with a svg file to get the path of a triangles in a triangulated image using Delaunay triangulation .the paths are represented as below:
<path
fill="rgba(148,148,147,255)"
stroke="rgba(0,0,0,255)"
d="M410,224 L411,227 L410,227 L410,224"
/>
<path
fill="rgba(232,232,232,255)"
stroke="rgba(0,0,0,255)"
d="M179,108 L180,107 L183,113 L179,108"
/>
I want to define a color for each 2 values, i mean for example the segment M179,108 L180,107 in blue and l183,113 L179,108 in red.How can I do that ?
Thank you in advance.

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!

Using SVG, is it possible to add text to the centre of a path and align it horizontally?

I want to add text to the centre of a path and align it horizontally, NOT align along the path.
I have the following text running along the path at the centre, but I want to display it so that it is horizontal, no matter what angle the path is heading.
<text text-anchor="middle">
<textPath xlink:href="#SomePath" startOffset="50%">Some Text</textPath>
</text>

If I understand correctly you are after each individual letter being straight (i.e. pointing North) but following the path. Something like this:
Looking at the current SVG standard this does not seem to be possible.
For horizontal text layout flows, the
reference orientation for a given
glyph is the vector that starts at the
intersection point on the path to
which the glyph is attached and which
points in the direction 90 degrees
counter-clockwise from the angle of
the curve at the intersection point.
The image above is generated from SVG but this was achieved (as you can see from the imperfections) by applying individual kerning (rotation) to each letter by applying the rotate attribute:
<text id="text2897">
<textPath xlink:href="#path2890" id="textPath3304">
<tspan
rotate="69.238731 53.737518 40.30315 24.801943 358.96658 358.96658 4.1336575 357.93317 351.73267 351.73267 351.73267 348.63242 343.46533 343.46533 346.56558 347.599 347.599 347.599 347.599 347.599 347.599 346.56558 345.53217 344.49875 343.46533"
id="tspan2899">
Some sample text for path
</tspan>
</textPath>
</text>

You can calculate the necessary adjustments in rotation in script quite easily:
var tp = document.getElementById("textpath");
var rotate = "";
for(var i = 0; i < tp.getNumberOfChars(); i++)
{
rotate += -tp.getRotationOfChar(i) + " ";
}
tp.setAttribute("rotate", rotate);

Resources