Showing an SVG that I have as a string - svg

I have some code that outputs an SVG as string.
Eg
foo = """
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" height="100" width="200" style="fill: blue"/>
</svg>
"""
I would like to display it in the cell output as an image.
I've seen several libraries do this.
How is it done?


display(mimetype, x)
display has a form that takes a mime-type as the first argument.
IJulia uses this information to determine how to display that object
So the code to display your foo, is display("image/svg+xml", foo)
Which will draw a nice blue rectangle.


In the newer versions of julia the accepted answer is no longer true. See this discussion instead you must save the string to a file, then read it. Something like:
f = open("images/animage.svg", "r")
s = read(f) #Don't force Julia to read a "String"
close(f) #Don't forget to close your file!
#show typeof(s); flush(stdout) #FYI: So you can understand what type is read back
display(MIME("image/svg+xml"), s)
The above code was taken from this discussion

Related

Svelte / D3 Function to get Point on a Path

I'd like to create a function that gets the coordinates of the nth point along an SVG path, while using Svelte and D3.
Note, the blue dot is not part of the code and there just for illustration.
I've tried this...
// the path generator
const pathLine = line()
.x(d => xScale(d.age))
.y(d => yScale(d.temp))
.curve(curveBasis);
function pointFromPath(position){
pos = pathLine(data).getPointAtLength(position);
return pos
}
$: console.log(pointFromPath(2))
...
<svg viewBox="0 0 100 100">
{#if (show)}
<path transition:draw={{duration: 2000}}
d={pathLine(data)} />
{/if}
</svg>
But it doesn't work and I'm not sure what to try next. My redproducable code is here
https://svelte.dev/repl/189b1ff0485f4697b3061dd29daf1d3a?version=3.32.3

The problem is that pathLine(data) is returning a string representing the "d" and not the DOM-element itself.
See a working example here:
https://svelte.dev/repl/76d1d7d0a38b4f6c9f02f9ffb0200ea5?version=3.32.3

Is there a way to make a map element(country/region) fly into its correct location on the map using svg animation?

I am just starting to play around with SVG animations. is it possible to make a country follow a random path to its correct place on the map? The equivalent of puzzle pieces assembling themselves when the box is opened is the best I can think of. Is this even possible with SVG animations or will something else be required?
This is what I have right now
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" />
<animate attributeType="XML" attributeName="x" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</g>
</svg>
Any help or pointers is greatly appreciated. Thanks

Path elements don't have an x attribute. You can do the same thing with a transform animation though.
Additionally an animate element must either be the child of the path or point to the path vi the path's id. Last I checked Chrome's accessing of elements with id values containing a - sign from SMIL was buggy so given that's what you have as an id I've made the animateTransform a child of your path.
Note that SMIL can't do random on its own, you could create something that looks like a random walk but it's going to be the same each time basically. You could create random SMIL animations via javascript.
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" >
<animateTransform attributeName="transform" type = "translate" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</path>
</g>
</svg>

How to fill in SVG paths?

I created this svg: https://svgshare.com/i/5z1.svg
If you view source you can see that each path looks like
<path stroke="black" stroke-width="10" fill="#666" d="M318237,48823 L321987,48823 M321987,48823 L321987,47323 M321987,47323 L318237,47323 M318237,47323 L318237,48823 Z" />
However, the svg still has just thin lines and each rectangular path remains unfilled. Is there a way to do this without converting the path into rectangles?

I believe that your paths are not closed and therefore they cannot be filled.
Let's see one path definition:
M318237,48823 L321987,48823 M321987,48823 L321987,47323 M321987,47323 L318237,47323 M318237,47323 L318237,48823 Z
Every M means moving to a point, L means drawing a line to a specified point. Z means closing the current subpath.
Anything that starts with M starts a new subpath. For example:
M318237,48823 L321987,48823
is a subpath which draws a line
M321987,48823 L321987,47323
Draws another line but without connecting it to the previous subpath, creating an unclosed path. It should be:
M318237,48823 L321987,48823 L321987,47323
and so on.
Full closed path:
<path stroke="black" stroke-width="10" fill="#666" d="M318237,48823 L321987,48823 L321987,47323 L318237,47323 L318237,48823 Z" />
The last line L318237,48823 can be omitted because that's what Z does anyway.
The definition could be also simplified using H and V commands since you have only straight horizontal/vertical lines.

Editing the size of an SVG file

<svg height="1000" width="977" xmlns="http://www.w3.org/2000/svg">
<path d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>
This svg will generate a search icon. It is written on the basis of 1000 hight and 977 width. If I change the width and the height it crops it and does not resize it. I would like to see a mathematical way or any tool online that can help me edit the code and resize it. I am using this on an HTML page and I know that I can just use css to resize it. However, I do not want to do that. I want to fix the svg file itself and resize it internally. Anyone has any idea on how to do that?

It's very simple.
Convert the width and height attributes to a viewBox. A viewBox will, for your purposes, take the form:
"0 0 <width> <height>"
so in this case it will become:
"0 0 977 1000"
Then set the width and height to appropriate values for the size icon you want. You will normally want them to keep the same ratio as the original values.
<svg width="97.7" height="100" viewBox="0 0 977 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>

If you just want a free solution to reliably scale or make any other alterations to an SVG graphic, have you considered free and open-source Inkscape?
From its Debian package description:
Most of the common vector formats are supported, including PDF, Adobe
Illustrator and AutoCAD files, and it has unrivaled support for the
SVG web graphics standard.
Install
Available on Mac, Linux, Windows.
For Windows, you can try Inkscape Portable if you like portable apps.
On Linux, for example Debian-based distributions, you can:
$ sudo apt-get install inkscape
Inkscape
Using a text editor, save the SVG code you posted, to a file, name it for example graphic.svg.
Start Inkscape.
Ctrl+O to see the Open dialog
Browse and open graphic.svg.
Observe: In your case, your graphic resembles a black and white magnifying glass.
Click once on the graphic to select it.
Observe: Inkscape handlebars indicate you have selected the graphic.
Ctrl-shift-m to open Transform panel.
Scale tab.
It currently says:
Width: 976.500
Height: 999.936
Change unit drop-down to px.
Check mark Scale proportionally.
Let's say you want the width to be approximately 200 pixels wide:
Width: 200
Press tab to exit the Width entry.
Observe: due to Scale proportionally, the height: has automatically been re-calculated and updated to a new value 205.824
Apply.
Close the Transform panel.
Observe: it appears smaller than the canvas.
Ctrl-shift-d to open Document Properties.
Observe: it currently says:
Width: 977
Height: 1000.00
click Resize page to content
click Resize page to drawing or selection
Observe: it now says:
Width: 201.00
Height: 205.82
Close the Document Properties dialog.
Ctrl-shift-s to get Save As dialog.
name: graphic2.png
Bottom right drop-down menu,
Change Inkscape SVG (*.svg) to Plain SVG (*.svg).
Save
So now you have succesfully created a smaller version of your original graphic.
Reasons
Plain SVG (*.svg) is slightly smaller than the default Inkscape SVG (*.svg). 1.2K vs 2.1K
Further tweaks
If you look at the sizes:
graphic.svg 472b
graphic2.svg 1.2K
If minimizing file size is important to you, or for some reason you wish to eliminate all the additional meta tags that Inkscape provides, you can always use a text editor to assemble a final, smaller file, for example name it graphic3.svg.
For its opening SVG tag, borrow from your original code, but alter the width and height appropriately to the newer values. We saw earlier in Inkscape's Document Properties that the canvas was re-sized to:
Width: 201.00
Height: 205.82
So adapt this to the SVG attributes:
<svg height="206" width="201" xmlns="http://www.w3.org/2000/svg">
From graphic2.png, copy the <path ... > code.
End the file with a close SVG tag:
</svg>
Save, and now your new graphic3.png is about as small as your original graphic.svg

javascript:
function scaleSvgString(str, multiplicator){
var result_string="";
var current_number="";
for (var i = 0, len = str.length; i < len; i++) {
//means "is a number or a decimal separator"
if( (str[i].charCodeAt()>=48 && str[i].charCodeAt()<=57) || str[i].charCodeAt()==46){
current_number+=""+str[i];
}else{
if(current_number.length>0){
var scaled_number=Number(current_number)*multiplicator;
result_string+=""+scaled_number;
//reset number buffer
current_number="";
}
result_string+=""+str[i];
}
}
return result_string;
}
call it like
scaleSvgString("<svg> ... </svg>", 0.5);
i haven't actually tested it, i hope it works lol

You can do it dynamically with JavaScript.
The working code in the snippet below requires that you add an id to the svg path (or rect or g or whatever) that you want to just fill your desired area. You also have to change the desired width and height to whatever you want.
Pros:
You can re-use this routine for any shapes and any sizes you want.
All calculations are done for you.
You don't have to worry about aspect ratios, i.e. relative dimensions.
You don't have to do anything to the svg code (other than potentially adding an id to the target shape, as described above) for any image coming out of your favourite drawing program or downloaded from online.
You can re-use the same image with no internal modifications in different locations in your code, with each potentially being a different desired size.
You could potentially make a single svg file (e.g. allMyIconsInOnePlace.svg) containing multiple images you want used in different places, and then just use the code to target one particular shape for one particular use by changing the shpId in the code.
Cons:
Your stored svg code will be a little mis-leading, as the saved version won't contain the true information about its scaling which will only be determined at run-time.
This code will have to be included and run every time you want to use the image this way.
The only way to see the actual structure of the modified svg element would be at run-time, e.g., by using 'inspect element' in a browser debugger.
var shpId = "myShape";
var desiredWdth = 100;
var desiredHght = 60;
var shp = document.getElementById(shpId);
var svg = shp.ownerSVGElement;
var shpBBox = shp.getBBox();
var viewBoxStr =
shpBBox.x + " " +
shpBBox.y + " " +
shpBBox.width + " " +
shpBBox.height;
svg.setAttribute("viewBox", viewBoxStr);
svg.width .baseVal.value = desiredWdth;
svg.height.baseVal.value = desiredHght;
<svg height="1000" width="977" xmlns="http://www.w3.org/2000/svg">
<path id="myShape" d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>

Raphael and preserveAspectRatio

With RaphaelJS, this command inserts an image:-
var myImg = paper.image('image.svg', 100, 100, 150,150);
and the SVG output is:-
<image x="100" y="100" width="150" height="150" preserveAspectRatio="none" href="image.svg"/>
Question: How do I directly access preserveAspectRatio attribute and change it to xMidYMid meet - if you examine myImg.attr(), it doesnt show this attribute.
The roundabout way is navigate the SVG DOM tree, and execute svgImg.setAttributeNS(null,"preserveAspectRatio" , "xMidYMid meet" );
Note: Only some images require none while the rest needs the xMidYMid meet tag. Hence I can't set this attribute on parent <svg>
Note2: Chrome doesn't support preserveAspectRatio with SVG images. Use FF or IE to test.

At the source code level, preserveAspectRatio is hardcoded to none
Answer The quickest way to change this:-;
myImg[0].preserveAspectRatio.baseVal.align = 6 (1 = off, 6 = xMidYMid)
myImg[0].preserveAspectRatio.baseVal.meetOrSlice = 1 (1 = meet, 2 = slice)
Update:- jQuery style:-
jQuery(myImg.node).prop('preserveAspectRatio').baseVal.align = 6 ;
jQuery(myImg.node).prop('preserveAspectRatio').baseVal.meetOrSlice = 1 ;
Raphael's docs for Element.node "Gives you a reference to the DOM object, so you can assign event handlers or just mess around. Note: Don’t mess with it."

You can call these parameters on the Raphael canvas as a whole.
First create SVG:
var paper = Raphael('content',xSize,ySize);
Place image in it:
paper.image('image.svg', 100, 100, 150,150);
Then change attributes of svg:
paper.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');

Resources