gnuplot a lot of repeated entries in svg - svg

I generate quite a lot of points with uniform scale and color:
set term svg size 600 600
set output "random_samples.svg"
set size square
set xrange [-0.05:1.05]
set yrange [-0.05:1.05]
plot "sorted_samples.data" using 1:2 with linespoints pt 7 pointsize 0.2 linewidth 0.3 linecolor "black" notitle
When number of samples grows my SVG files start to become very heavy. I had a look inside of the SVG file and it seems that there are many entries that are repeated:
<use xlink:href='#gpPt6' transform='translate(451.7,96.7) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(462.0,92.1) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(284.3,73.6) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(242.5,278.1) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(405.9,285.2) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(166.8,55.8) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(168.4,61.4) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(166.8,119.7) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(541.0,64.0) scale(0.90)' color='rgb(148, 0, 211)'/>
<use xlink:href='#gpPt6' transform='translate(421.2,100.2) scale(0.90)' color='rgb(148, 0, 211)'/>
By using text editor I removed scale and color. By doing this I can reduce file size from 2.3MB to 1.3MB. That is a significant difference.
Is there a way to output more optimised SVGs from gnuplot?
P.S. I am looking for some more automated solution rather than manually going file by file.

Related

Is it possible to redraw a single Mesh in WebGl?

I'm having code as follows:
let arr = new Float32Array([-0.4, 0.3, -0.4, 0, 0.3, -0.2,
-0.5, -0.25,
0.7, 0.25,
0.9, -0.7
]);
let position_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, position_buffer);
gl.bufferData(gl.ARRAY_BUFFER, arr, gl.STATIC_DRAW)
gl.vertexAttribPointer(position_location, 2, gl.FLOAT, false, 0 , 0);
gl.enableVertexAttribArray(position_location);
gl.drawArrays(gl.TRIANGLES, 0, 6)
If i want to change the second triangle (initial vertex -0.5, -0.25 in the arr), is there a way, to reach a gpu buffer, and tell him to redraw the vertices with an offset 3, and length of 3 ? So my first triangle wouldn't be redrawn?

It's called instanced drawing in webgl. Maybe for somebody would be helpful.

SVG - linearGradient. Transformation ratio matrix (4x4)

I would like to write a function that described the coefficients of the transformation matrix of linearGradient using a transformation matrix of dimension 4x4. Please help to fill in this matrix with the coefficients necessary to apply this matrix to some object.
For example, we have a description of the gradient:
<linearGradient
id="linearGradient2286"
x1="75.927002"
x2="136.64999"
y1="32.581001"
y2="127.08"
gradientTransform="matrix(0.20149,0,0,0.20149,-413.35,-155.75)"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#6262f1"
offset="0"
id="stop2" />
<stop
stop-color="#1d1d34"
offset="1"
id="stop4" />
</linearGradient>
I want to fill in the transformation matrix of the view:
Matrix4 m1 = (
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0);

Depending on the layout of your matrix, I would expect it to be either:
0.20149, 0, 0, 0,
0, 0.20149, 0, 0,
0, 0, 1, 0,
-413.35, -155.75, 0, 1
or the transposed version
0.20149, 0, 0, -413.35,
0, 0.20149, 0, -155.75
0, 0, 1, 0,
0, 0, 0, 1

Gnuplot: x1y1 plot and x2y1 plot not sharing same xtics

I am trying to do a multiplot. Following are the 4 files that I used with
File1.csv
,col1,col2,col3,col4,col5,col6
10,-39, 0.7, 0, 0,99.3, 0
14,-42, 0.0, 0, 0, 100, 0
42,-64, 0, 0, 0, 100, 0
46,-67, 2.5, 0, 0,97.5, 0
50,-69, 7.6, 0, 0,92.4, 0
54,-75, 0, 0, 0, 100, 0
58,-78, 3.7, 0, 0,96.3, 0
62,-82, 69.0, 0, 0,31.0, 0
66,-85, 0, 0, 0, 0, 0
70,-100,0,0,0,0,0
74,-100,0,0,0,0,0
70,-100,0,0,0,0,0
66,-100,0,0,0,0,0
62,-100,0,0,0,0,0
58,-78, 2.1, 0, 0,97.9, 0
54,-74, 2.9, 0, 0,97.1, 0
50,-69, 2.3, 0, 0,97.7, 0
46,-65, 2.4, 0, 0,97.6, 0
42,-65, 0, 0, 0, 100, 0
14,-43, 1.5, 0, 0,98.5, 0
10,-40, 1.0, 0, 0,99.0, 0
File2.csv
,col1,col2,col3,col4,col5,col6
10,-39, 0.7, 0, 0,99.3, 0
14,-42, 0.0, 0, 0, 100, 0
42,-64, 0, 0, 0, 100, 0
46,-67, 2.5, 0, 0,97.5, 0
50,-69, 7.6, 0, 0,92.4, 0
54,-75, 0, 0, 0, 100, 0
58,-78, 3.7, 0, 0,96.3, 0
62,-82, 69.0, 0, 0,31.0, 0
66,-85, 0, 0, 0, 0, 0
70,-100,0,0,0,0,0
74,-100,0,0,0,0,0
70,-100,0,0,0,0,0
66,-100,0,0,0,0,0
62,-100,0,0,0,0,0
58,-78, 2.1, 0, 0,97.9, 0
54,-74, 2.9, 0, 0,97.1, 0
50,-69, 2.3, 0, 0,97.7, 0
46,-65, 2.4, 0, 0,97.6, 0
42,-65, 0, 0, 0, 100, 0
14,-43, 1.5, 0, 0,98.5, 0
10,-40, 1.0, 0, 0,99.0, 0
File3.csv
,col1,col2,col3,col4,col5,col6
10,-39, 0.7, 0, 0,99.3, 0
14,-42, 0.0, 0, 0, 100, 0
42,-64, 0, 0, 0, 100, 0
46,-67, 2.5, 0, 0,97.5, 0
50,-69, 7.6, 0, 0,92.4, 0
54,-75, 0, 0, 0, 100, 0
58,-78, 3.7, 0, 0,96.3, 0
62,-82, 69.0, 0, 0,31.0, 0
66,-85, 0, 0, 0, 0, 0
70,-100,0,0,0,0,0
74,-100,0,0,0,0,0
70,-100,0,0,0,0,0
66,-100,0,0,0,0,0
62,-100,0,0,0,0,0
58,-78, 2.1, 0, 0,97.9, 0
54,-74, 2.9, 0, 0,97.1, 0
50,-69, 2.3, 0, 0,97.7, 0
46,-65, 2.4, 0, 0,97.6, 0
42,-65, 0, 0, 0, 100, 0
14,-43, 1.5, 0, 0,98.5, 0
10,-40, 1.0, 0, 0,99.0, 0
File4.csv
,col1,col2,col3,col4,col5,col6
10,-39, 0.7, 0, 0,99.3, 0
14,-42, 0.0, 0, 0, 100, 0
42,-64, 0, 0, 0, 100, 0
46,-67, 2.5, 0, 0,97.5, 0
50,-69, 7.6, 0, 0,92.4, 0
54,-75, 0, 0, 0, 100, 0
58,-78, 3.7, 0, 0,96.3, 0
62,-82, 69.0, 0, 0,31.0, 0
66,-85, 0, 0, 0, 0, 0
70,-100,0,0,0,0,0
74,-100,0,0,0,0,0
70,-100,0,0,0,0,0
66,-100,0,0,0,0,0
62,-100,0,0,0,0,0
58,-78, 2.1, 0, 0,97.9, 0
54,-74, 2.9, 0, 0,97.1, 0
50,-69, 2.3, 0, 0,97.7, 0
46,-65, 2.4, 0, 0,97.6, 0
42,-65, 0, 0, 0, 100, 0
14,-43, 1.5, 0, 0,98.5, 0
10,-40, 1.0, 0, 0,99.0, 0
Gnuplot script I got is histogram graph on x1y1 axis and linespoint graph on x2y1 axis
set colors classic
set terminal png notransparent size 1800,640 truecolor medium
set output 'reading.png'
set grid front
set tmargin -1; set bmargin -1
set lmargin -1; set rmargin -1
set style data histogram
set style histogram rowstacked
set style fill solid
set boxwidth 0.5
set datafile separator ","
set xtics axis
set yrange [0:100]
set y2range [-100:-10]
set y2tics
set y2label "Y2Label"
set ylabel "YLabel"
set multiplot layout 4,1
unset xtics
unset key
plot for [COL=3:6] 'file1.csv' u COL:xtic(1) axes x1y1 ti col,'' u 2:xtic(1) with linespoint axes x1y2
plot for [COL=3:6] 'file2.csv' u COL:xtic(1) axes x1y1 ti col,'' u 2:xtic(1) with linespoint axes x1y2
plot for [COL=3:6] 'file3.csv' u COL:xtic(1) axes x1y1 ti col,'' u 2:xtic(1) with linespoint axes x1y2
set key below
set xtics
plot for [COL=3:6] 'file4.csv' u COL:xtic(1) ti col,'' u 2:xtic(1) with linespoint axes x1y2
unset multiplot
The resultant graph that I got is having different starting points on x-axis. Can someone please help synchronize histogram and linespoint plots in this.

I can reproduce your result. Right away, I don't know why this shift is happening. Probably something with indexing starting at 0 or starting at 1. Maybe something with the header line or with the histogram style in combination with the linespoints plot.
A possible fix could be using column 0, i.e. ($0-1) (see help pseudocolumns) as x coordinate for the linespoints plot.
By the way, you don't have to use xtic(1) mulitple times, it is identical anyway.
Your plot command would shorten to:
plot for [COL=3:6] 'file1.csv' u COL axes x1y1 ti col, '' u ($0-1):2 w lp axes x1y2
plot for [COL=3:6] 'file2.csv' u COL axes x1y1 ti col, '' u ($0-1):2 w lp axes x1y2
plot for [COL=3:6] 'file3.csv' u COL axes x1y1 ti col, '' u ($0-1):2 w lp axes x1y2
set key below
set xtics
plot for [COL=3:6] 'file4.csv' u COL axes x1y1 ti col, '' u ($0-1):2:xtic(1) w lp axes x1y2

Align overflow SVG content to right edge of viewport to overflow under the left

I have SVG content that overflows to the right by having 'X' coordinates that have higher value than viewBox sets. Is there any way to make the content show the right-most part and that it will overflow to the left? (like right-justify the text)
Here is the full SVG I am working with, it is a plot that overflows and I want to show the part to the right but hide the "older" points:
the reason for doing this is that points get generated automatically and I want to always show the latest dots on the viewable area and the image to "auto-scroll" to the right.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100" class="chart">
<style>
.chart {
background: white;
width: 500px;
height: 100px;
border-left: 1px dotted #555;
border-bottom: 1px dotted #555;
padding: 20px 20px 20px 0;
}
body {
/* background: #ccc; */
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
body, html {
height: 100%;
}
</style>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="0, 0
10, 64"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="10, 64
20, 48"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="20, 48
30, 86"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="30, 86
40, 4"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="40, 4
50, 70"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="50, 70
60, 91"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="60, 91
70, 50"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="70, 50
80, 61"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="80, 61
90, 32"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="90, 32
100, 89"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="100, 89
110, 51"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="110, 51
120, 77"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="120, 77
130, 60"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="130, 60
140, 60"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="140, 60
150, 0"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="150, 0
160, 16"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="160, 16
170, 90"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="170, 90
180, 69"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="180, 69
190, 70"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="190, 70
200, 100"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="200, 100
210, 18"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="210, 18
220, 0"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="220, 0
230, 6"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="230, 6
240, 43"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="240, 43
250, 2"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="250, 2
260, 4"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="260, 4
270, 74"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="270, 74
280, 56"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="280, 56
290, 80"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="290, 80
300, 26"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="300, 26
310, 69"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="310, 69
320, 77"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="320, 77
330, 19"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="330, 19
340, 37"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="340, 37
350, 72"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="350, 72
360, 61"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="360, 61
370, 33"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="370, 33
380, 62"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="380, 62
390, 11"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="390, 11
400, 27"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="400, 27
410, 43"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="410, 43
420, 83"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="420, 83
430, 75"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="430, 75
440, 27"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="440, 27
450, 74"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="450, 74
460, 30"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="460, 30
470, 44"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="470, 44
480, 86"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="480, 86
490, 19"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="490, 19
500, 34"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="500, 34
510, 54"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="510, 54
520, 57"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="520, 57
530, 59"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="530, 59
540, 45"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="540, 45
550, 100"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="550, 100
560, 84"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="560, 84
570, 97"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="570, 97
580, 24"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="580, 24
590, 6"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="590, 6
600, 73"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="600, 73
610, 52"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="610, 52
620, 68"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="620, 68
630, 47"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="630, 47
640, 36"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="640, 36
650, 57"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="650, 57
660, 49"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="660, 49
670, 25"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="670, 25
680, 15"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="680, 15
690, 1"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="690, 1
700, 33"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="700, 33
710, 38"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="710, 38
720, 2"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="720, 2
730, 70"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="730, 70
740, 23"/>
</svg>

Illustrator SVG unequal coordinate exporting for shape tween

I am trying to create a SMIL animation tween between two shapes and I know that the two shapes need to have the same number of coordinates. The problem I have is when I export the two SVGs from Illustrator the coordinates do not match up in terms of how many sets there are. Both shapes are created form the same source with no extra points added or removed, just a curve at the top straightened out.
Here is my SVG on Codepen http://codepen.io/tands/pen/LEmoOK and below...
<!-- smile circle -->
<svg version="1.1" x="0px" y="0px" viewBox="0 0 453.5 290" enable-background="new 0 0 453.5 290" xml:space="preserve">
<path fill="#000000" d="
M226.8,
34.9
C146.3,
34.9,
71.5,
22,
8.9,
0
C3.1,
20.1,
0,
41.3,
0,
63.2
C0,
188.5,
101.5,
290,
226.8,
290
S453.5,
188.5,
453.5,
63.2
c0-21.9-3.1-43.1-8.9-63.2
C382.1,
22,
307.2,
34.9,
226.8,
34.9z
H0z
"/>
</svg>
<!-- partial circle -->
<svg version="1.1" x="0px" y="0px" viewBox="0 0 453.5 290" enable-background="new 0 0 453.5 290" xml:space="preserve">
<path fill="#000000" d="
M8.9,
0
C3.1,
20.1,
0,
41.3,
0,
63.2
C3.1,
20.1,
0,
41.3,
0,
63.2
C0,
188.5,
101.5,
290,
226.8,
290
S453.5,
188.5,
453.5,
63.2
c0-21.9-3.1-43.1-8.9-63.2
C0,
0,
0,
0,
0,
0
H8.9z
"/>
</svg>
So I guess my question is how do I achieve the shape tween between the two shapes on codepen even though they have different coordinates?

Resources