1

Тема: Мінімізація svg.polygon

В мене є величезний svg файл який складається з polygon
Наприклад

<polygon points="3342.8,5411.2 3337.2,5419 3339.9,5442.3 3351.7,5456.6 3351.7,5468.5 3346.6,5470.3 3332.7,5491.1 3324.3,5491.1 3310.3,5509 3314.8,5529.6 3321.3,5532.2 3329.1,5561.5 3335,5561.5 3333.6,5567.1 3341.3,5587.4 3335.6,5634.8 3344.3,5648.9 3356.8,5650.9 3377.7,5665 3377.7,5670.6 3389.3,5664.6 3389.3,5659.6 3393.1,5659.6 3402.5,5644.7 3402.5,5639 3412.8,5625.9 3420,5626.2 3426.6,5617.8 3432.2,5617.2 3451,5601.5 3468,5604.1 3491,5593.1 3497.5,5593.1 3535.1,5560.9 3535.1,5554.1 3538.9,5553.7 3529.4,5546.3 3518.7,5543.6 3506.2,5531.1 3506.7,5518.3 3499.6,5509.3 3492.2,5511.1 3488.6,5515 3486.5,5514.4 3486.5,5487.3 3455.5,5460.7 3397.4,5436.5 3393.8,5440.8 3374.7,5425.3 3369.6,5426.4 3368.7,5421.7 3352,5413.3"/>

І проблема в тому що координати точок дуже великі і файл займає надто багато місця
Чи можливо якось в svg записати наприклад як (x,y,вітстань до наступної точки,напрям,вітстань до наступної точки, напрям,вітстань до наступної точки, напрям ...)
Може хтось з таким зіткався?

2

Re: Мінімізація svg.polygon

Зменшити можливо перевівши polygon в path
Корисне відео https://www.youtube.com/watch?v=2IY-xTCFjiM
Але я не знайшов адекватних функцій які конвертують polygon в path(
Того що вони тільки добавляють в початку M і в кінці Z
Прийдеться свою робити
Коли зроблю викладу сюди ссилку на github, може комусь допоможе

Подякували: leofun011

3

Re: Мінімізація svg.polygon

Ось сама функція

function poligonToPath(data){
        function getD(points){
          var p = points.split(' '),
              d = '';
          for(var i = 0; i < p.length; i++){
            var x = p[i].split(',')[0],
                y = p[i].split(',')[1];
            if(i == 0){
              d += 'M' + x + ' ' + y;
            }else if(i > 0){
              var lastX = p[i - 1].split(',')[0],
                  lastY = p[i - 1].split(',')[1],
                  newX = parseFloat(x - lastX).toFixed(1),
                  newY = parseFloat(y - lastY).toFixed(1);
              if(newX != 0 && newY != 0){
                d += 'l' + newX + ' ' + newY;
              }else if(newX == 0){
                d += 'h' + newY;
              }else if(newY == 0){
                d += 'v' + newX;
              }
            }
          }
          d += 'z';
          return d;
        }
        var newSvg = $(data),
            polygons = newSvg.find('polygon');
        for(var i = 0; i < polygons.length; i++){
          var p = $(polygons[i])
          p.attr('d', getD(p.attr('points')));
          p.removeAttr('points');
        }
        return newSvg.html().replace(/polygon/g, 'path');
      }

весь код на CodePen
https://codepen.io/unter/pen/YdzzyZ

В результаті я зміг зменшити мій вектор на 28%, а при його загальній величині в 150мбт це дуже значуще
Планую ще перевести всі точки в цілі числа(зараз float з одним числом за комою), це зменшить вектор ще на 22%, але там потрібно якось співставляти точки сусідніх елементів, і якщо просто переформатувати в int це руйнує цілісність вектора

Подякували: Chemist-i1