Как удалить пространство из файла svg в PHP

Как удалить пробелы в SVG-файле?

Это мой svg-файл.

<svg xmlns = "http://www.w3.org/2000/svg" fill = "none" xmlns:xlink = "http://www.w3.org/1999/xlink" style = "margin:auto;display:block;" width = "100" height = "100" viewBox = "0 0 100 100" preserveAspectRatio = "xMidYMid">
<rect width = "100%" height = "100%" fill = "none"/>

    <circle cx = "72" cy = "50" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-0.9s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-0.9s"></animate>
    </circle>
    <circle cx = "67.79837387624885" cy = "62.93127555043441" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-0.8s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-0.8s"></animate>
    </circle>
    <circle cx = "56.798373876248846" cy = "70.92324335849338" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-0.7s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-0.7s"></animate>
    </circle>
    <circle cx = "43.20162612375116" cy = "70.92324335849338" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-0.6s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-0.6s"></animate>
    </circle>
    <circle cx = "32.201626123751154" cy = "62.931275550434414" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-0.5s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-0.5s"></animate>
    </circle>
    <circle cx = "28" cy = "50" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-0.4s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-0.4s"></animate>
    </circle>
    <circle cx = "32.201626123751154" cy = "37.06872444956559" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-0.3s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-0.3s"></animate>
    </circle>
    <circle cx = "43.201626123751154" cy = "29.076756641506623" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-0.2s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-0.2s"></animate>
    </circle>
    <circle cx = "56.79837387624884" cy = "29.07675664150662" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-0.1s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-0.1s"></animate>
    </circle>
    <circle cx = "67.79837387624885" cy = "37.068724449565586" fill = "#007a5c" r = "4">
        <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "0s"></animate>
        <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "0s"></animate>
    </circle>
</svg>

Я использовал imagemagick, но он не работает.

Используйте viewBox = "24 24 52 52" вместо viewBox = "0 0 100 100" для элемента svg. Чтобы узнать значение viewBox, вы можете использовать метод getBBox() JS.

— 16.07.2024 13:34

Какое отношение этот вопрос имеет к PHP? Думаю, стоит убрать это из названия.

— 16.07.2024 13:50

svg

16.07.2024 13:16

Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Не это имеет большое значение, но вместо размещения каждого элемента круга «абсолютным» вы можете поместить круги в элемент группировки (<g>) и использовать преобразование/поворот для размещения кругов.

<svg xmlns = "http://www.w3.org/2000/svg" height = "100" viewBox = "0 0 52 52" preserveAspectRatio = "xMidYMid">
  <g transform = "translate(26 26)">
    <circle transform = "rotate(0)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-.9s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-.9s" />
    </circle>
    <circle transform = "rotate(36)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-.8s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-.8s" />
    </circle>
    <circle transform = "rotate(72)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-.7s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-.7s" />
    </circle>
    <circle transform = "rotate(108)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-.6s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-.6s" />
    </circle>
    <circle transform = "rotate(144)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-.5s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-.5s" />
    </circle>
    <circle transform = "rotate(180)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-.4s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-.4s" />
    </circle>
    <circle transform = "rotate(216)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-.3s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-.3s" />
    </circle>
    <circle transform = "rotate(252)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-.2s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-.2s" />
    </circle>
    <circle transform = "rotate(288)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "-.1s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "-.1s" />
    </circle>
    <circle transform = "rotate(324)" cx = "22" fill = "#007a5c" r = "4">
      <animate attributeName = "r" values = "2.4;2.4;4;2.4;2.4" times = "0;0.1;0.2;0.3;1" dur = "1s" repeatCount = "indefinite" begin = "0s" />
      <animate attributeName = "fill" values = "#007a5c;#007a5c;#125443;#007a5c;#007a5c" repeatCount = "indefinite" times = "0;0.1;0.2;0.3;1" dur = "1s" begin = "0s" />
    </circle>
  </g>
</svg>

Или вообще нет <g> и viewBox = "-26 -26 54 54"

— 16.07.2024 15:09

@ Danny'365CSI'Engelman, но посмотрите на атрибуты cx и cy кругов. В моей книге мое решение гораздо яснее 😉.

— 16.07.2024 15:34

Да, четкость - это субъективно, размер файла (в сжатом формате gzip) - нет.

— 16.07.2024 16:15

Просто перечитайте свой комментарий. Я имел в виду установку viewBox в вашей версии; оба являются переводами (ваш перевод в <g> или перевод в viewBox)

— 16.07.2024 17:30

@Danny'365CSI'Engelman, ок, я это пропустил. Ты прав. Я бы все равно предпочел <g> для удобства чтения.

— 16.07.2024 17:36

16.07.2024 14:57

Ответ принят как подходящий

Похоже, вы рассчитываете позиции <circle> с помощью PHP Server Side.

Вы можете сохранить циклы процессора сервера вместе с ответом Кристиана, используя rotate,
и веб-компонент в <head> вашего документа
для создания клиентской стороны SVG (без пробелов в HTML) и анимировать с помощью SMIL

(Для краткости я проигнорировал тонкое анимированное изменение цвета)

<svg-spinner></svg-spinner>
<svg-spinner dots=18></svg-spinner>

<script>
  customElements.define("svg-spinner", class extends HTMLElement {
    connectedCallback() {
      this.innerHTML = 
        `<svg height=100 viewBox = "-12 -12 24 24" style=background:beige>` +
          Array( ~~(this.getAttribute("dots")  || 10) )
            .fill(  this.getAttribute("color") || "#007a5c" )
            .map((v, i, a) =>
              `<circle transform=rotate(${i*(360/a.length)}) fill=${v} cx=10>` +
              `  <animate attributeName=r begin=${i*1/a.length} values=1;2 
                          dur=1s repeatCount=indefinite />` +
              `</circle>`)
            .join("") + 
        `</svg>`
    }
  })
</script>

<svg-spinner color=blue></svg-spinner>

И для тех, кто говорит: Но для этого нужен JavaScript...
Если вам нужен счетчик на веб-странице, держу пари, машина моей жены, ваш пользователь ждет загрузки JavaScript.

16.07.2024 16:14

Другие вопросы по теме

Как использовать SVG из файла с несколькими SVG с помощью селектора идентификатора с помощью ::before

Использование Playwright – как проверить SVG-изображение по значениям d?

SVG текстура плиточная плоскость

Элементы управления типа полосы прокрутки для панорамирования SVG

Как динамически раскрасить импортированный значок SVG в Svelte без фильтров CSS?

Круговой индикатор выполнения SVG для завершения прогресса по определенному значению

Изменить цвет встроенного SVG внутри тега <img>

IsPointInFIll не работает при программном создании SVG через DOMParser

Как получить эффект режима наложения разницы с помощью flutter_svg

Как выровнять текст внутри SVG

Как удалить пространство из файла svg в PHP

Ответы 2

Другие вопросы по теме

Похожие вопросы