I would like to use SvgIcon like that :
const iconsSVG = {
// WORKING
"PS1": "M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z",
"PS2": "M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z",
"PS3": "M15.363 9.438h-3.148c-.97 0-1.447.6-1.447 1.38v2.366c0 .483-.228.83-.71.83H7.304c-.02 0-.035.017-.035.035v.47c0 .02.01.032.03.032h3.11c.97 0 1.45-.597 1.45-1.377V10.81c0-.484.225-.832.71-.832h2.782c.02 0 .04-.014.04-.033V9.47c0-.02-.02-.035-.04-.035zm-9.267 0H.038c-.022 0-.038.017-.038.035v.477c0 .02.016.036.038.036h5.694c.48 0 .71.347.71.83s-.228.83-.71.83H1.228c-.7 0-1.227.587-1.227 1.366v1.513c0 .02.02.037.04.037h1.03c.02 0 .04-.016.04-.037v-1.513c0-.48.28-.82.68-.82H6.1c.97 0 1.444-.595 1.444-1.375 0-.778-.473-1.38-1.442-1.38zm17.454 2.498c-.015-.015-.015-.04 0-.056.3-.25.45-.627.45-1.062 0-.778-.474-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0 .02.02.04.04.04h5.7c.48 0 .715.35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0 .02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0 .485-.23.833-.71.833h-5.7c-.02 0-.036.015-.036.034v.477c0 .02.015.037.036.037h6.05c.973 0 1.446-.645 1.446-1.38v-.057c0-.47-.15-.916-.45-1.19z",
// NOT WORKING
"PSP": "M67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194 M307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7 M228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194",
"PC": "M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268 267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2 -462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449 0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0 1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273 273 -440 0 -440 0 -273 -273z"
}
// ... some piece of code latter
<SvgIcon>
<path d={iconsSVG["PS3"]} /> // any key of the iconsSVG could be used
</SvgIcon>
However, the "PSP" and "PC" icons aren't displayed and I cannot find out what could be the error when I convert them.
Here are the original files :
PSP icon :
<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"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<path d="M 67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194"></path>
<path d="M 307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7"></path>
<path d="M 228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194"></path>
</svg>
PC icon :
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="640.000000pt" height="407.000000pt" viewBox="0 0 640.000000 407.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,407.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268
267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2
-462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z"/>
<path d="M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449
0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0
1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273
273 -440 0 -440 0 -273 -273z"/>
</g>
</svg>
Thanks for the help
PSP and PC icons have 3 and 2 path and viewBox="0 0 500 500" viewBox="0 0 640.000000 407.000000"
This SvgIcon has 1 path and "0 0 24 24" default viewBox
You can specify viewBox prop and path array for your icons but in PC item there is also g tag so it won't be displayed that way
const iconsSVG = {
// WORKING
PS1: {
path: [
"M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z",
],
viewBox: "0 0 24 24",
},
PS2: {
path: [
"M7.46 13.779v.292h4.142v-3.85h3.796V9.93h-4.115v3.85zm16.248-3.558v1.62h-7.195v2.23H24v-.292h-7.168v-1.646H24V9.929h-7.487v.292zm-16.513 0v1.62H0v2.23h.292v-1.938H7.46V9.929H0v.292Z",
],
viewBox: "0 0 24 24",
},
PS3: {
path: [
"M15.363 9.438h-3.148c-.97 0-1.447.6-1.447 1.38v2.366c0 .483-.228.83-.71.83H7.304c-.02 0-.035.017-.035.035v.47c0 .02.01.032.03.032h3.11c.97 0 1.45-.597 1.45-1.377V10.81c0-.484.225-.832.71-.832h2.782c.02 0 .04-.014.04-.033V9.47c0-.02-.02-.035-.04-.035zm-9.267 0H.038c-.022 0-.038.017-.038.035v.477c0 .02.016.036.038.036h5.694c.48 0 .71.347.71.83s-.228.83-.71.83H1.228c-.7 0-1.227.587-1.227 1.366v1.513c0 .02.02.037.04.037h1.03c.02 0 .04-.016.04-.037v-1.513c0-.48.28-.82.68-.82H6.1c.97 0 1.444-.595 1.444-1.375 0-.778-.473-1.38-1.442-1.38zm17.454 2.498c-.015-.015-.015-.04 0-.056.3-.25.45-.627.45-1.062 0-.778-.474-1.38-1.446-1.38h-6.057c-.02 0-.036.018-.036.038v.475c0 .02.02.04.04.04h5.7c.48 0 .715.35.715.83s-.23.83-.712.83h-5.7c-.02 0-.036.02-.036.04v.48c0 .02.016.034.037.034h5.7c.63.007.71.62.71.93v.06c0 .485-.23.833-.71.833h-5.7c-.02 0-.036.015-.036.034v.477c0 .02.015.037.036.037h6.05c.973 0 1.446-.645 1.446-1.38v-.057c0-.47-.15-.916-.45-1.19z",
],
viewBox: "0 0 24 24",
},
// NOT WORKING
PSP: {
path: [
"M 67.5,194 174.4,194 174.4,225.7 71.7,225.7 71.7,253.2 67.5,253.2 67.5,221.5 170.2,221.5 170.2,198.2 67.5,198.2 67.5,194",
"M 307.9,225.7 307.9,253.2 303.7,253.2 303.7,221.5 406.3,221.5 406.3,198.2 303.7,198.2 303.7,194 410.6,194 410.6,225.7 307.9,225.7",
"M 228.9,194 228.9,249 174.4,249 174.4,253.2 233.3,253.2 233.3,198.2 287.8,198.2 287.8,194 228.9,194",
],
viewBox: "0 0 500 500",
},
PC: {
path: [
"M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268 267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2 -462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z",
"M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449 0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 01035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273 273 -440 0 -440 0 -273 -273z",
],
viewBox: "0 0 640.000000 407.000000",
},
};
// ... some piece of code latter
function App() {
const type = "PC";
const { viewBox, path } = iconsSVG[type];
return (
<SvgIcon viewBox={viewBox}>
{path.map((d) => (
<path d={d} key={d} />
))}
</SvgIcon>
);
}
You should better save your SVG as simple react components without material SVG then import them and put to an array
your PC file svg code
import React from "react";
export const PCSvg = () => (
<svg
width='24'
height='24'
viewBox="0 0 640.000000 407.000000"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0.000000,407.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none"
>
<path
d="M1210 2030 l0 -1730 420 0 420 0 2 583 3 582 245 3 245 2 268 268
267 267 0 605 0 605 -273 273 -272 272 -663 0 -662 0 0 -1730z m998 571 l2
-462 -77 3 -78 3 -3 457 -2 457 67 3 c38 2 73 3 78 3 6 -1 11 -165 13 -464z"
/>
<path
d="M3492 3487 l-272 -272 0 -1190 0 -1190 268 -268 268 -267 450 0 449
0 268 268 267 267 -2 475 -3 475 -440 0 -440 0 -3 -397 -2 -398 -70 0 -70 0 0
1035 0 1035 70 0 70 0 2 -327 3 -328 440 0 440 0 3 405 2 405 -272 272 -273
273 -440 0 -440 0 -273 -273z"
/>
</g>
</svg>
);
Your import code
import { PCSvg } from './PC';
function App() {
return (
<PCSvg />
);
}
export default App;
Related
I have svg file that looks like this
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300.000000pt" height="226.000000pt" viewBox="0 0 300.000000 226.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,226.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M891 2162 c-95 -33 -418 -606 -616 -1092 -75 -185 -106 -330 -70 -67 -2 3 7 36 19 75 13
27 67 2 -3 -7 -36 -19 -75z"/>
<path d="M1316 2019 c-33 -39 -8035 -57 -37 -58 -82 -59 -25 0 -55 -2 -66 -4 -11 -2 -58 -8 -104
-15 -158 -22 -330 -77 -315 -101 10 -17 85 -5 311 51 -12 -15 -27z"/>
<path d="M925 1349 c-4 -6 -5 -12 -2 -15 2 -3 7 2 10 11 7 17 1 20 -8 4z"/>
</g>
</svg>
I want to get d attribute of each path element and combine it in one svg path string (that consists of all three paths )
I've tried this buy only get first one every time
fs.readFile(path_to_svg,'utf8',(err,data)=>{
if(err) console.log(err);
$ = cheerio.load(data,{ xmlMode : true });
$('svg').children().each(function(i,path){
console.log($('path').attr('d'))
});
});
You can get those with:
$('svg path').get().map(path => $(path).attr('d'))
I convert PGN chess pieces into SVG files then load them up into Glyphr Studio that makes a .OTF file so that I use then in various chess programs.
Unfortunately after installing the font the white pieces are all transparent instead of being a solid white piece.
Could someone have a look at my code to see why I have this problem, this is the white rook.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="315.000000pt" height="271.000000pt" viewBox="0 0 315.000000 271.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,271.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M387 2423 c-4 -3 -7 -386 -7 -850 l0 -843 -57 -26 c-67 -29 -126 -82
-155 -138 -29 -57 -36 -173 -13 -233 24 -63 94 -135 158 -164 l52 -24 1205 0
c1161 0 1207 1 1254 19 200 77 252 338 95 481 -24 23 -70 51 -101 64 l-58 23
-2 847 -3 846 -305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162
-305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162 -301 3 c-165 1
-303 -1 -307 -5z m473 -298 l0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0
-165 0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0 -780 0 -780 -1050 0 -1050
0 0 780 0 780 170 0 170 0 0 -165z m1912 -1562 c118 -54 118 -202 0 -256 l-47
-22 -1150 0 -1150 0 -47 22 c-57 26 -88 71 -88 128 0 46 28 98 62 116 70 38
70 38 1238 36 l1135 -2 47 -22z"/>
</g>
</svg>
I need to know how to combine multiple from a SVG file.
Right now I have three icons and somehow I can not find any logic behind that.
I read that I need to remove the last part and combine it with the following.
Example:
From
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
TO
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
But the output is empty.
And if I only take one path of both I will see only this path.
Is there any easy explanation how to do that?
If you then take your path:
M54.4 2a54.4 54.4 0 106.2 108.4c9.1 2.2 18.9 3.5 28.3 5.2a40 40 0 0132.4 32.4l35.4 99.7a49.9 49.9 0 0049.2 41.3h210c22 0 41.5-14.4 47.9-35.5l47-155.8c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8zm97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 1.3H206c-14.6 0-27-10.4-29.5-24.8z
and multiply it by 10 using: https://yqnn.github.io/svg-path-editor/
You get rid of all decimal notation and make the file even smaller:
M 544 20 a 544 544 90 1 0 62 1084 c 91 22 189 35 283 52 a 400 400 90 0 1 324 324 l 354 1997 a 499 499 90 0 0 492 413 h 2100 c 220 0 415 -144 479 -355 l 470 -1558 c 8 -30 3 -63 -15 -89 c -20 -25 -49 -40 -80 -40 H 1482 l -72 -403 c -70 -244 -136 -383 -492 -487 A 542 542 90 0 0 544 20 z m 0 200 a 344 344 90 1 1 0 688 a 344 344 90 0 1 0 -688 z m 974 1827 h 3360 l -431 1429 a 298 298 90 0 1 -287 213 H 2060 c -146 0 -270 -104 -295 -248 z
The viewBox ofcourse needs to be multiplied as well. As the (default) stroke-width="1"
<svg width="400" viewBox="0 0 5150 3900">
<path d="M544 20a544 544 90 1 0 62 1084c91 22 189 35 283 52a400 400 90 0 1 324 324l354 1997
a499 499 90 0 0 492 413h2100c220 0 415-144 479-355l470-1558c8-30 3-63-15-89
c-20-25-49-40-80-40h-3531l-72-403c-70-244-136-383-492-487a542 542 90 0 0-374-938z
m0 200a344 344 90 1 1 0 688a344 344 90 0 1 0-688z
m974 1827h3360l-431 1429a298 298 90 0 1-287 213h-2100c-146 0-270-104-295-248z"
stroke="red" stroke-width="10" fill="gray"/>
</svg>
You can save 30 bytes more in the path if you now divide everything by 6
M90 3a90 90 90 1 0 10 180c15 4 31 6 47 9a66 66 90 0 1 54 54l59 332a83 83 90 0 0 82 69h349c37 0 69-24 80-59l78-259c1-5 0-10-2-15c-3-4-8-7-13-7h-588l-12-67c-12-41-23-64-82-81a90 90 90 0 0-62-156zm0 33a57 57 90 1 1 0 114a57 57 90 0 1 0-114zm162 303h558l-72 237a49 49 90 0 1-48 35h-348c-24 0-45-17-49-41z
You can visualize your paths if you put them in a suitable <svg> element. It needs to have a "sensible" viewBox attribute in it. For your example the following works: <svg viewBox="0 0 620 840">. I also added two rectangles (<rect>) to show the extent of your overlaying symbols.
Note: To actually combine two paths into one is a slightly more complex task. This can be done with a suitable graphical SVG-editor, like Inkscape (or many others ...).
<svg viewBox="0 0 620 840">
<rect x="0" y="0" width="480" height="440" style="stroke:black;fill:none"/>
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
<rect x="80" y="300" width="540" height="440" style="stroke:black;fill:none"/>
<g style="fill:none;stroke:red">
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
</g>
</svg>
I combined the two paths of your second part using Inkscape, put it through the online SVG optimizer SVGOMG! (thanks for the hint, Danny '365CSI' Engelman) and ended up with this:
<svg xmlns="http://www.w3.org/2000/svg"
width="400" viewBox="-1 0 515 390">
<path d="M54.4 2a54.4 54.4 0 106.2 108.4
c9.1 2.2 18.9 3.5 28.3 5.2
a40 40 0 0132.4 32.4l35.4 199.7a49.9 49.9 0 0049.2 41.3
h210c22 0 41.5-14.4 47.9-35.5l47-155.8
c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3
c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20
a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8z
m97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 21.3H206
c-14.6 0-27-10.4-29.5-24.8z"
stroke="red" fill="gray"/>
</svg>
I am trying to plot the result of an experiment with the following
set encoding iso_8859_1
set key right top font "Helvetica,17"
# set key left top font "Helvetica,18"
# set key at 100,1.25 bottom center font "Helvetica,17"
# set ylabel "Percentage of non-completed batches" font "Helvetica,18"
set ylabel "Extra frames" font "Helvetica,18"
set xlabel "Dispersion [%]" font "Helvetica,18"
unset key
set xtics font "Helvetica,18"
set ytics font "Helvetica,18"
set terminal postscript eps enhanced color #size 6.5in,3in #"Helvetica" 16 #
set output "contour.eps"
set palette rgbformulae 33,13,10
$complete << EOD
0 0 2.000400080016007
0 5 1.160696417850715
0 10 0.48028817290374226
0 15 0.5003001801080598
0 20 0.5201040208041574
0 25 0.9803921568627416
0 30 2.360472094418886
0 35 14.942988597719541
0 40 28.6972183309986
0 45 34.78783026421137
0 50 39.771817453963166
0 55 47.28837302381429
0 60 62.3124624924985
0 65 74.25940752602081
0 70 79.45589117823565
0 75 86.93477390956382
0 80 91.47829565913183
0 85 94.21884376875374
0 90 95.75915183036608
0 95 97.47949589917984
0 100 98.33966793358671
20 0 0
20 5 0
20 10 0
20 15 0
20 20 0
20 25 0
20 30 0
20 35 0
20 40 0
20 45 0
20 50 0
20 55 0
20 60 0.22022022022022414
20 65 0.26026026026025884
20 70 1.6012810248198561
20 75 7.301460292058415
20 80 13.165266106442575
20 85 22.03321993195918
20 90 33.13325330132053
20 95 42.997198879551824
20 100 52.041633306645316
40 0 0
40 5 0
40 10 0
40 15 0
40 20 0
40 25 0
40 30 0
40 35 0
40 40 0
40 45 0
40 50 0
40 55 0
40 60 0
40 65 0.020016012810253336
40 70 0.08006405124099114
40 75 1.9619619619619666
40 80 7.703081232492992
40 85 12.264905962384953
40 90 22.168867547018813
40 95 31.81909145487293
40 100 43.17727090836334
60 0 0
60 5 0
60 10 0
60 15 0
60 20 0
60 25 0
60 30 0
60 35 0
60 40 0
60 45 0
60 50 0
60 55 0
60 60 0
60 65 0
60 70 0.02000400080015563
60 75 0.7201440288057581
60 80 5.484387510008004
60 85 9.263705482192874
60 90 18.170902541524914
60 95 28.665733146629325
60 100 38.21528611444578
80 0 0
80 5 0
80 10 0
80 15 0
80 20 0
80 25 0
80 30 0
80 35 0
80 40 0
80 45 0
80 50 0
80 55 0
80 60 0
80 65 0
80 70 0
80 75 0.4604604604604656
80 80 4.02080416083217
80 85 7.78155631126225
80 90 15.835835835835832
80 95 25.690276110444177
80 100 34.90792634107286
100 0 0
100 5 0
100 10 0
100 15 0
100 20 0
100 25 0
100 30 0
100 35 0
100 40 0
100 45 0
100 50 0
100 55 0
100 60 0
100 65 0
100 70 0
100 75 0.16009605763458445
100 80 3.220644128825767
100 85 7.145716573258609
100 90 13.985594237695075
100 95 22.83370022013208
100 100 32.0328131252501
120 0 0
120 5 0
120 10 0
120 15 0
120 20 0
120 25 0
120 30 0
120 35 0
120 40 0
120 45 0
120 50 0
120 55 0
120 60 0
120 65 0
120 70 0
120 75 0.08001600320064473
120 80 2.8411364545818274
120 85 5.841168233646732
120 90 12.782556511302257
120 95 21.73303982389434
120 100 30.550550550550547
140 0 0
140 5 0
140 10 0
140 15 0
140 20 0
140 25 0
140 30 0
140 35 0
140 40 0
140 45 0
140 50 0
140 55 0
140 60 0
140 65 0
140 70 0
140 75 0.02000800320127727
140 80 2.601040416166467
140 85 5.584467574059248
140 90 12.027216329797874
140 95 20.12012012012012
140 100 29.372871168102588
160 0 0
160 5 0
160 10 0
160 15 0
160 20 0
160 25 0
160 30 0
160 35 0
160 40 0
160 45 0
160 50 0
160 55 0
160 60 0
160 65 0
160 70 0
160 75 0.02000800320127727
160 80 1.8021625951141318
160 85 5.321064212842563
160 90 10.024009603841533
160 95 18.60744297719088
160 100 29.040656919687557
180 0 0
180 5 0
180 10 0
180 15 0
180 20 0
180 25 0
180 30 0
180 35 0
180 40 0
180 45 0
180 50 0
180 55 0
180 60 0
180 65 0
180 70 0
180 75 0.020012007204317506
180 80 1.8603720744148844
180 85 4.90196078431373
180 90 10.864345738295322
180 95 18.687474989996
180 100 27.09083633453382
200 0 0
200 5 0
200 10 0
200 15 0
200 20 0
200 25 0
200 30 0
200 35 0
200 40 0
200 45 0
200 50 0
200 55 0
200 60 0
200 65 0
200 70 0
200 75 0.020012007204317506
200 80 1.3605442176870763
200 85 4.520904180836172
200 90 9.601920384076813
200 95 17.363472694538906
200 100 26.485297059411884
220 0 0
220 5 0
220 10 0
220 15 0
220 20 0
220 25 0
220 30 0
220 35 0
220 40 0
220 45 0
220 50 0
220 55 0
220 60 0
220 65 0
220 70 0
220 75 0.020012007204317506
220 80 1.241489787745298
220 85 4.520904180836172
220 90 8.805283169901944
220 95 17.18687474989996
220 100 25.825165033006602
240 0 0
240 5 0
240 10 0
240 15 0
240 20 0
240 25 0
240 30 0
240 35 0
240 40 0
240 45 0
240 50 0
240 55 0
240 60 0
240 65 0
240 70 0
240 75 0
240 80 1.0806483890334229
240 85 4.740948189637928
240 90 8.30332132853141
240 95 16.643328665733147
240 100 25.245049009801956
260 0 0
260 5 0
260 10 0
260 15 0
260 20 0
260 25 0
260 30 0
260 35 0
260 40 0
260 45 0
260 50 0
260 55 0
260 60 0
260 65 0
260 70 0
260 75 0
260 80 1.040208041608326
260 85 4.181672669067627
260 90 8.641728345669131
260 95 15.606242496998801
260 100 25.415249149489693
280 0 0
280 5 0
280 10 0
280 15 0
280 20 0
280 25 0
280 30 0
280 35 0
280 40 0
280 45 0
280 50 0
280 55 0
280 60 0
280 65 0
280 70 0
280 75 0
280 80 0.9603841536614643
280 85 3.8007601520304024
280 90 7.74464678807284
280 95 15.395395395395395
280 100 24.16966786714686
300 0 0
300 5 0
300 10 0
300 15 0
300 20 0
300 25 0
300 30 0
300 35 0
300 40 0
300 45 0
300 50 0
300 55 0
300 60 0
300 65 0
300 70 0
300 75 0
300 80 0.860860860860857
300 85 3.923923923923922
300 90 7.401480296059216
300 95 14.811849479583671
300 100 25.27516509905944
320 0 0
320 5 0
320 10 0
320 15 0
320 20 0
320 25 0
320 30 0
320 35 0
320 40 0
320 45 0
320 50 0
320 55 0
320 60 0
320 65 0
320 70 0
320 75 0
320 80 1.00040016006403
320 85 3.7222333400039997
320 90 7.923169267707086
320 95 15.398478173808572
320 100 22.864572914582915
340 0 0
340 5 0
340 10 0
340 15 0
340 20 0
340 25 0
340 30 0
340 35 0
340 40 0
340 45 0
340 50 0
340 55 0
340 60 0
340 65 0
340 70 0
340 75 0
340 80 0.8001600320064028
340 85 3.640728145629124
340 90 7.488986784140971
340 95 14.165666266506605
340 100 23.024604920984192
360 0 0
360 5 0
360 10 0
360 15 0
360 20 0
360 25 0
360 30 0
360 35 0
360 40 0
360 45 0
360 50 0
360 55 0
360 60 0
360 65 0
360 70 0
360 75 0
360 80 0.7204322593556078
360 85 3.3806761352270454
360 90 6.742697078831528
360 95 14.943910256410254
360 100 22.08883553421368
380 0 0
380 5 0
380 10 0
380 15 0
380 20 0
380 25 0
380 30 0
380 35 0
380 40 0
380 45 0
380 50 0
380 55 0
380 60 0
380 65 0
380 70 0
380 75 0
380 80 0.5404323458767069
380 85 3.5007001400280013
380 90 6.8254603682946335
380 95 14.522904580916185
380 100 22.246696035242287
400 0 0
400 5 0
400 10 0
400 15 0
400 20 0
400 25 0
400 30 0
400 35 0
400 40 0
400 45 0
400 50 0
400 55 0
400 60 0
400 65 0
400 70 0
400 75 0
400 80 0.48067294211896483
400 85 3.3633633633633586
400 90 6.242496998799519
400 95 14.068441064638781
400 100 23.324664932986593
420 0 0
420 5 0
420 10 0
420 15 0
420 20 0
420 25 0
420 30 0
420 35 0
420 40 0
420 45 0
420 50 0
420 55 0
420 60 0
420 65 0
420 70 0
420 75 0
420 80 0.4003202562049668
420 85 3.141256502601042
420 90 6.761352270454091
420 95 13.568140884530722
420 100 22.98919567827131
440 0 0
440 5 0
440 10 0
440 15 0
440 20 0
440 25 0
440 30 0
440 35 0
440 40 0
440 45 0
440 50 0
440 55 0
440 60 0
440 65 0
440 70 0
440 75 0
440 80 0.200080032012806
440 85 3.0218130878527094
440 90 6.4051240992794245
440 95 13.4453781512605
440 100 21.024204840968196
460 0 0
460 5 0
460 10 0
460 15 0
460 20 0
460 25 0
460 30 0
460 35 0
460 40 0
460 45 0
460 50 0
460 55 0
460 60 0
460 65 0
460 70 0
460 75 0
460 80 0.4601840736294549
460 85 2.7005401080216096
460 90 6.841368273654735
460 95 12.70508203281312
460 100 20.92837134853942
480 0 0
480 5 0
480 10 0
480 15 0
480 20 0
480 25 0
480 30 0
480 35 0
480 40 0
480 45 0
480 50 0
480 55 0
480 60 0
480 65 0
480 70 0
480 75 0
480 80 0.3800760152030458
480 85 3.0224179343474766
480 90 5.542216886754703
480 95 13.522704540908181
480 100 21.87750200160128
500 0 0
500 5 0
500 10 0
500 15 0
500 20 0
500 25 0
500 30 0
500 35 0
500 40 0
500 45 0
500 50 0
500 55 0
500 60 0
500 65 0
500 70 0
500 75 0
500 80 0.46027616569942476
500 85 2.901741044626771
500 90 6.162464985994398
500 95 13.265306122448983
500 100 19.603524229074885
EOD
set contour base
set cntrparam level incremental 0, 10, 100
unset surface
set table 'cont.dat'
splot '$complete'
unset table
plot [0:100][0:150] '$complete' using 2:1:3 with image , 'cont.dat' w l lt -1 lw 1.5
and the figure is
which has the isolines rotated. I would like to ask how to rotate the isolines.
Besides, I would like to ask how I could make a plot of the data with colors not blurred like this
to compare which of the two represents better the data block.
Regards
If you do not specify using ... gnuplot will plot using 1:2, but in your case you need 2:1, that's why x and y are switched (rotated).
If you add/change the following lines:
set palette maxcolors 10
plot [0:100][0:150] '$complete' using 2:1:3 with image , 'cont.dat' u 2:1 w l lt -1 lw 1.5
You should get something like this:
I'm currently trying to create the SVG of an old image, however I have trouble creating the correct rotated and positioned text cutout.
When I try to add a <text> element it ends up stretched, under the form or is not visible at all.
Here is what I came up with so far:
<svg
height="360px"
width="100%"
preserveAspectRatio="none"
viewBox="0 0 100 360"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path
id="banner"
d="M0,186 L 100,0 100,186 0,360 Z"
fill="#2180b3"
vector-effect="non-scaling-stroke" />
</defs>
<use xlink:href="#banner" />
</svg>
And here is what I'm trying to archive:
The cutout should be white
Thanks!
You can just use an image to svg converter like this one
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1280.000000pt" height="376.000000pt" viewBox="0 0 1280.000000 376.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.13, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,376.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M12700 3702 c-52 -7 -95 -14 -96 -15 -14 -22 -434 -961 -432 -966 2
-5 143 -157 313 -339 l310 -330 3 413 c1 227 1 602 0 832 l-3 418 -95 -13z"/>
<path d="M11785 3569 c-176 -26 -331 -49 -343 -51 -21 -3 0 -33 199 -283 184
-231 223 -276 230 -260 10 28 240 617 246 633 3 6 1 11 -3 11 -5 -1 -153 -23
-329 -50z"/>
<path d="M5440 2648 c-2989 -435 -5436 -792 -5438 -793 -1 -1 -1 -391 0 -866
l3 -864 5592 760 c3076 418 5596 765 5601 770 10 10 441 948 449 976 3 10
-122 155 -352 410 -319 353 -360 394 -388 396 -18 1 -2478 -354 -5467 -789z"/>
<path d="M11818 2058 c-75 -189 -135 -344 -134 -344 1 -2 669 88 732 98 18 2
-14 46 -208 283 -126 154 -234 286 -242 293 -10 10 -38 -52 -148 -330z"/>
</g>
</svg>