Create this SVG with Raphael - svg

I'm working with inline SVG elements and I would like to run this in IE8, could anyone implement this with Raphael?
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="643px" height="735px" viewBox="0 0 643 735" enable-background="new 0 0 643 735" xml:space="preserve">
<a xlink:href="img/interactive/pietraCT/00.jpg" rel="floors" title="zobacz rzut parteru">
<g id="ct_00">
<polygon points="172.25,647 381.75,640.75 422,641.75 422,665 415.75,679.5 402.75,679.5 401.25,667 393.751,665 363.625,665 352.005,671.673 346,673 338.625,677 172.25,672.5"/>
</g>
</a>
</svg>


This is answered here
In short, you need to use the path() call, and you need to modify your points to adhere to the convention that Raphael uses (which is defined here)
this is a fiddle using your polygon. You'll have to scroll down in the bottom right window to see it though.

Related

How to refer to values set in the parent document in an element imported via <use>

For a toy project I'm working with random flag designs and random flag colors. Since the paths are a huge chunk of ugly exported SVG, I'd like to have all these shapes put into a library SVG. That way, the generator would only have to create a small, simple-to-read stub to define the colors, and import the designs from the library.
A pair of demonstration files.
flaglib.svg:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="300px" viewBox="0 0 500 300" xml:space="preserve">
<g id="Design1">
<rect width="500px" height="300px" fill="url(#BACKGROUND_PRIMARY)" />
<circle cx="250px" cy="150px" r="90px" fill="url(#FOREGROUND_PRIMARY)" />
</g>
...
</svg>
flagstub.svg:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="2.0" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="500px" height="500px" viewBox="0 0 500 500" xml:space="preserve">
<defs>
<linearGradient id="BACKGROUND_PRIMARY"><stop offset="50%" stop-color="#F00" /></linearGradient>
<linearGradient id="FOREGROUND_PRIMARY"><stop offset="50%" stop-color="#FF0" /></linearGradient>
</defs>
<use href="flaglib.svg#Design1"></use>
</svg>
The tag with the ID #BACKGROUND_PRIMARY is only defined once, so when it imports the missing text before it renders, it shouldn't be pulling a value for that from anywhere else. And yet, they ignore the values set.
So: how can the SVG elements imported from the library file use the colors defined in the stub fule?

What browser(s) are you testing with? Last I checked, only Firefox properly supports external use references.
See this question for more discussion on this topic.

Why can't open the svg file with inkscape?

There is a svg file ,i can show it with chrome.
svg file
Why can see nothing when to import it(please download it form dropbox and save it as gen.svg) with inkscape?

This svg includes a PNG-File instead of SVG path or fill instructions, where Inkscape is made for:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="880px" height="919px" viewBox="0 0 880 919" enable-background="new 0 0 880 919" xml:space="preserve"> <image id="image0" width="880" height="919" x="0" y="0"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAAOXCAIAAADqyTS6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAACA
AElEQVR42uz995sj2XXnCX/PDQeXyMzypqurq71h03uRlEhKlKVGErWa0c7MzuzO+0ftM7O7MyPD
...
ODowMKFcwFEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDQtMTFUMTY6MTc6MjQrMDg6MDDQAXjt
AAAAAElFTkSuQmCC" />
</svg>

The problem is that the image isn't linked correctly. Use
xlink:href
instead of
href

Openlayers 4 shows only 1/4 of SVG image

I'm trying to mark a coordinates with SVG icon in Openlayers 4.3.3:
import ControllerRecordIcon from '../icons/entypo/controller-record.svg';
vector.setStyle(new Style({
image: new IconStyle({
scale: 0.5,
src: ControllerRecordIcon
})
}));
map.addLayer(vector);
Icon is from Entypo package and this is the code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
You can see the problem in the attached image. There is only top left quarter of icon visible and it's not centered on coordinates (red dot marks the coordinates). Scaling doesn't help, icon gets smaller but still shows only 1/4 of image and is not centered.
I tried multiple params from Icon API, but they either make no difference or icon disappears completely.

<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='20' height='20' xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
use this one

SVG graphic with animate tag is not animating

I'm trying to create my first animating SVG graphic! I have a star that I want to first get animated in any way I can before I try to get the desired animation. So I've been examining tutorials, and I thought I had my code set up properly, but when I open it in a browser, it doesn't animate. Something isn't right, and it's probably the code that Illustrator generated that's causing the issue. I tried to clean it up already though. I'm sure it's something easy to get working.
In the following code, I'm trying to animate the star from the right of screen to the left (1000 to 0). If you could help me figure that out I'd surely appreciate it!
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
height="193" width="182.67" viewBox="0 0 193 182.67" enable-background="new 0 0 193 182.67" xml:space="preserve">
<path x="0" y="100" stroke="goldenrod" stroke-width="3" fill="gold" fill-rule="evenodd" clip-rule="evenodd" d="M155.97,182.35c-6.51-1.77-11.74-5.54-17.37-8.4
c-13.17-6.7-26.14-13.79-39.17-20.76c-1.61-0.86-3.28-1.05-4.77-0.19c-13.24,7.61-27.21,13.84-40.54,21.28
c-3.56,1.98-7.05,4.1-10.71,5.88c-4.06,1.98-6.25,0.61-4.9-3.53c1.98-6.1,1.49-12.46,3.14-18.59c1.21-4.5,1.7-9.31,2.47-13.99
c1.1-6.69,2.03-13.39,3.66-19.99c1.1-4.45,0.71-8.19-3.33-11.91C31.24,99.98,18.18,87.63,5.51,74.88
c-1.61-1.62-2.88-3.51-4.62-5.04C1.82,68.4,3.35,69.08,4.5,69c9.23-0.58,18.21-2.84,27.34-3.84c6.58-0.72,12.96-2.74,19.68-2.61
c4.47,0.09,8.68-2.01,13.27-2.03c2.68-0.01,3.74-2.98,4.68-5.18c2.5-5.84,5.53-11.38,8.64-16.91c5.32-9.44,8.74-19.82,14.13-29.24
C93.78,6.5,95.26,3.78,97,0.64c3.18,4.47,4.81,9.38,7.11,13.89c6.86,13.42,13.52,26.93,20.16,40.46c1.92,3.91,4.54,5.53,9.13,6.08
c6.34,0.76,12.73,1.67,19.05,2.99c5.63,1.17,11.45,1.86,17.21,2.49c6.85,0.75,13.54,2.74,20.54,2.46c2.28-0.09,2.7,1.23,0.84,3.13
c-3.56,3.64-7.36,7.04-11.07,10.53c-10.97,10.3-21.53,21.02-32.17,31.67c-1.94,1.94-2.43,3.65-2.11,6.49
c1.21,10.7,4.27,21.07,5.09,31.87c0.59,7.77,2.86,15.43,4.62,23.08C155.88,177.93,156.1,179.96,155.97,182.35z" >
<animate
attributeName = "x"
from = "1000"
to = "0"
begin = "0s"
dur = "0.5s"
id = "swipe"
/>
</path>
</svg>

This is not animating because <path> elements do not have an x attribute.

Try this animateColor tag , it will start animating.
<animateColor
attributeName="fill"
attributeType="XML"
from="black"
to="grey"
dur=".5s"
repeatCount="indefinite"/>

How can a SVG sprite be made using independent SVG images?

How can I combine SVG icons from http://raphaeljs.com/icons/ to make a CSS Sprite.
When I do this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30em" height="160em" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">
<g id="icons">
<g id="linkedin">
<path d="M27.25,3.125h-22c-1.104,0-2,0.896-2,2v22c0,1.104,0.896,2,2,2h22c1.104,0,2-0.896,2-2v-22C29.25,4.021,28.354,3.125,27.25,3.125zM11.219,26.781h-4v-14h4V26.781zM9.219,11.281c-1.383,0-2.5-1.119-2.5-2.5s1.117-2.5,2.5-2.5s2.5,1.119,2.5,2.5S10.602,11.281,9.219,11.281zM25.219,26.781h-4v-8.5c0-0.4-0.403-1.055-0.687-1.213c-0.375-0.211-1.261-0.229-1.665-0.034l-1.648,0.793v8.954h-4v-14h4v0.614c1.583-0.723,3.78-0.652,5.27,0.184c1.582,0.886,2.73,2.864,2.73,4.702V26.781z"
/>
</g>
<g id="github">
<path d="M 500 800 M28.436,15.099c-1.201-0.202-2.451-0.335-3.466-0.371l-0.179-0.006c0.041-0.09,0.072-0.151,0.082-0.16c0.022-0.018,0.04-0.094,0.042-0.168c0-0.041,0.018-0.174,0.046-0.35c0.275,0.01,0.64,0.018,1.038,0.021c1.537,0.012,3.145,0.136,4.248,0.331c0.657,0.116,0.874,0.112,0.389-0.006c-0.491-0.119-1.947-0.294-3.107-0.37c-0.779-0.053-1.896-0.073-2.554-0.062c0.019-0.114,0.041-0.241,0.064-0.371c0.093-0.503,0.124-1.009,0.126-2.016c0.002-1.562-0.082-1.992-0.591-3.025c-0.207-0.422-0.441-0.78-0.724-1.104c0.247-0.729,0.241-1.858-0.015-2.848c-0.211-0.812-0.285-0.864-1.021-0.708C22.19,4.019,21.69,4.2,21.049,4.523c-0.303,0.153-0.721,0.391-1.024,0.578c-0.79-0.278-1.607-0.462-2.479-0.561c-0.884-0.1-3.051-0.044-3.82,0.098c-0.752,0.139-1.429,0.309-2.042,0.511c-0.306-0.189-0.75-0.444-1.067-0.604C9.973,4.221,9.473,4.041,8.847,3.908c-0.734-0.157-0.81-0.104-1.02,0.708c-0.26,1.003-0.262,2.151-0.005,2.878C7.852,7.577,7.87,7.636,7.877,7.682c-1.042,1.312-1.382,2.78-1.156,4.829c0.059,0.534,0.15,1.024,0.277,1.473c-0.665-0.004-1.611,0.02-2.294,0.064c-1.162,0.077-2.618,0.25-3.109,0.369c-0.484,0.118-0.269,0.122,0.389,0.007c1.103-0.194,2.712-0.32,4.248-0.331c0.29-0.001,0.561-0.007,0.794-0.013c0.07,0.237,0.15,0.463,0.241,0.678L7.26,14.759c-1.015,0.035-2.264,0.168-3.465,0.37c-0.901,0.151-2.231,0.453-2.386,0.54c-0.163,0.091-0.03,0.071,0.668-0.106c1.273-0.322,2.928-0.569,4.978-0.741l0.229-0.02c0.44,1.022,1.118,1.802,2.076,2.41c0.586,0.373,1.525,0.756,1.998,0.816c0.13,0.016,0.508,0.094,0.84,0.172c0.333,0.078,0.984,0.195,1.446,0.262h0.011c-0.009,0.006-0.017,0.01-0.025,0.016c-0.56,0.291-0.924,0.744-1.169,1.457c-0.11,0.033-0.247,0.078-0.395,0.129c-0.529,0.18-0.735,0.217-1.271,0.221c-0.556,0.004-0.688-0.02-1.02-0.176c-0.483-0.225-0.933-0.639-1.233-1.133c-0.501-0.826-1.367-1.41-2.089-1.41c-0.617,0-0.734,0.25-0.288,0.615c0.672,0.549,1.174,1.109,1.38,1.537c0.116,0.24,0.294,0.611,0.397,0.824c0.109,0.227,0.342,0.535,0.564,0.748c0.522,0.498,1.026,0.736,1.778,0.848c0.504,0.074,0.628,0.074,1.223-0.002c0.287-0.035,0.529-0.076,0.746-0.127c0,0.244,0,0.525,0,0.855c0,1.766-0.021,2.334-0.091,2.5c-0.132,0.316-0.428,0.641-0.716,0.787c-0.287,0.146-0.376,0.307-0.255,0.455c0.067,0.08,0.196,0.094,0.629,0.066c0.822-0.051,1.403-0.355,1.699-0.891c0.095-0.172,0.117-0.518,0.147-2.318c0.032-1.953,0.046-2.141,0.173-2.42c0.077-0.166,0.188-0.346,0.25-0.395c0.104-0.086,0.111,0.084,0.111,2.42c-0.001,2.578-0.027,2.889-0.285,3.385c-0.058,0.113-0.168,0.26-0.245,0.33c-0.135,0.123-0.192,0.438-0.098,0.533c0.155,0.154,0.932-0.088,1.356-0.422c0.722-0.572,0.808-1.045,0.814-4.461l0.003-2.004l0.219,0.021l0.219,0.02l0.036,2.621c0.041,2.951,0.047,2.994,0.549,3.564c0.285,0.322,0.572,0.5,1.039,0.639c0.625,0.188,0.813-0.102,0.393-0.605c-0.457-0.547-0.479-0.756-0.454-3.994c0.017-2.076,0.017-2.076,0.151-1.955c0.282,0.256,0.336,0.676,0.336,2.623c0,2.418,0.069,2.648,0.923,3.07c0.399,0.195,0.511,0.219,1.022,0.221c0.544,0.002,0.577-0.006,0.597-0.148c0.017-0.115-0.05-0.193-0.304-0.348c-0.333-0.205-0.564-0.467-0.709-0.797c-0.055-0.127-0.092-0.959-0.117-2.672c-0.036-2.393-0.044-2.502-0.193-2.877c-0.201-0.504-0.508-0.902-0.897-1.166c-0.101-0.066-0.202-0.121-0.333-0.162c0.161-0.016,0.317-0.033,0.468-0.055c1.572-0.209,2.403-0.383,3.07-0.641c1.411-0.543,2.365-1.445,2.882-2.724c0.046-0.114,0.092-0.222,0.131-0.309l0.398,0.033c2.051,0.173,3.706,0.42,4.979,0.743c0.698,0.177,0.831,0.198,0.668,0.105C30.666,15.551,29.336,15.25,28.436,15.099zM22.422,15.068c-0.233,0.512-0.883,1.17-1.408,1.428c-0.518,0.256-1.33,0.451-2.25,0.544c-0.629,0.064-4.137,0.083-4.716,0.026c-1.917-0.188-2.991-0.557-3.783-1.296c-0.75-0.702-1.1-1.655-1.039-2.828c0.039-0.734,0.216-1.195,0.679-1.755c0.421-0.51,0.864-0.825,1.386-0.985c0.437-0.134,1.778-0.146,3.581-0.03c0.797,0.051,1.456,0.051,2.252,0c1.886-0.119,3.145-0.106,3.61,0.038c0.731,0.226,1.397,0.834,1.797,1.644c0.18,0.362,0.215,0.516,0.241,1.075C22.808,13.699,22.675,14.517,22.422,15.068zM12.912,11.762c-1.073-0.188-1.686,1.649-0.863,2.587c0.391,0.445,0.738,0.518,1.172,0.248c0.402-0.251,0.62-0.72,0.62-1.328C13.841,12.458,13.472,11.862,12.912,11.762zM19.425,11.872c-1.073-0.188-1.687,1.647-0.864,2.586c0.392,0.445,0.738,0.519,1.173,0.247c0.401-0.25,0.62-0.72,0.62-1.328C20.354,12.569,19.985,11.971,19.425,11.872zM16.539,15.484c-0.023,0.074-0.135,0.184-0.248,0.243c-0.286,0.147-0.492,0.096-0.794-0.179c-0.187-0.169-0.272-0.258-0.329-0.081c-0.053,0.164,0.28,0.493,0.537,0.594c0.236,0.094,0.405,0.097,0.661-0.01c0.254-0.106,0.476-0.391,0.476-0.576C16.842,15.303,16.595,15.311,16.539,15.484zM16.222,14.909c0.163-0.144,0.2-0.44,0.044-0.597s-0.473-0.133-0.597,0.043c-0.144,0.206-0.067,0.363,0.036,0.53C15.865,15.009,16.08,15.034,16.222,14.909z"
/>
</g>
</g>
</svg>
the SVG icons overlap. How can I modify these to have an offset between two icons?
For instance, the one similar to http://dbushell.com/demos/css-sprites/sprite.svg

Try to replace the 2nd M command to m command.
"M" means absolute position, "m" means relative position.
so,
<M 500 800 ｍ28.436,15.099c-1.201-0.202-2.…

Resources