Масштабирование SVG в окне просмотра HTML - PullRequest
3 голосов
/ 04 апреля 2020

Мне нужна помощь с масштабированием SVG в окне просмотра HTML.

Я играю в шаблоне HTML для веб-сайта и хочу изменить стандартное изображение SVG шаблона на другой образ. Я не могу получить новый SVG с путем d = "что-то, что-то" для правильного масштабирования.

Я бы хотел, чтобы новое изображение SVG корректно вписывалось в центр окна просмотра 91 на 91 .

Я изучил систему SVG viewbox онлайн, но не могу понять, как она работает. У меня есть некоторый python опыт кодирования, но ничего слишком серьезного, нет HTML опыта.

Пожалуйста, помогите, объяснение ниже.

Код со стандартным SVG-изображением следующий:

<div id="section-publications" class="o-container   wow1 fadeIn"  data-contentPosition="4">
<div class="c-section-heading">
  <svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91">
    <rect class="svg-icon__border" x="0.5" y="0.5" width="90" height="90"/>
    <path class="svg-icon__item" d="M441.844,1714.1a3.587,3.587,0,0,1-1.175,2.18,4.8,4.8,0,0,1-2.425,1.12,9.54,9.54,0,0,1-1.5.1,12.291,12.291,0,0,1-1.5,0h-30a5.209,5.209,0,0,1-2.25-.45,3.054,3.054,0,0,1-1.65-1.7,4.191,4.191,0,0,1-.05-2.65,14.023,14.023,0,0,1,.75-1.75l10.95-20.3a2.556,2.556,0,0,0,.25-1.05v-4.65a0.605,0.605,0,0,0-.075-0.35,0.574,0.574,0,0,0-.375-0.15,3.05,3.05,0,0,1-2.175-.97,3.2,3.2,0,0,1-.875-2.28l-0.05-1.65c0.033-.27.067-0.53,0.1-0.8a3.232,3.232,0,0,1,1.125-1.87,3.119,3.119,0,0,1,2.075-.73h16.25a3.213,3.213,0,0,1,2.4.98,3.157,3.157,0,0,1,.9,2.42c0-.5.017-0.12,0.05,1.15a6.137,6.137,0,0,1-.1,1.2,3.257,3.257,0,0,1-1.075,1.8,3.076,3.076,0,0,1-1.925.75,0.574,0.574,0,0,0-.375.15,0.605,0.605,0,0,0-.075.35v4.85a1.7,1.7,0,0,0,.3.8l11.8,20.4a4.6,4.6,0,0,1,.7,3.1h0Zm-2.425.05a4.446,4.446,0,0,0-.675-2.25l-11.2-20.85a1.941,1.941,0,0,1-.25-0.7q0.05-3.645,0-7.2a0.379,0.379,0,0,1,.1-0.32,0.5,0.5,0,0,1,.3-0.08h1.55a1.474,1.474,0,0,0,1.125-.45,1.8,1.8,0,0,0,.475-1.15v-1.65a1.552,1.552,0,0,0-.45-1.15,1.622,1.622,0,0,0-1.2-.45h-16.05a1.722,1.722,0,0,0-1.25.43,1.652,1.652,0,0,0-.45,1.27v1.6a1.755,1.755,0,0,0,.475,1.1,1.474,1.474,0,0,0,1.125.45,9.973,9.973,0,0,0,1.375,0,0.519,0.519,0,0,1,.475.08,0.781,0.781,0,0,1,.1.47q-0.05,3.345,0,6.65a2.09,2.09,0,0,1-.3,1.1l-11.1,20.7a6.541,6.541,0,0,0-.7,1.7,1.652,1.652,0,0,0,1.45,2.2,5.753,5.753,0,0,0,1.3.1h31.25a3.855,3.855,0,0,0,1.5-.25A1.369,1.369,0,0,0,439.419,1714.15Zm-22.2-40.52a1.953,1.953,0,0,1-.575-1.43,2.015,2.015,0,0,1,.575-1.45,1.948,1.948,0,0,1,1.425-.62,1.833,1.833,0,0,1,1.45.6,2.031,2.031,0,0,1,.6,1.47,2.049,2.049,0,0,1-2.05,2.05A2.115,2.115,0,0,1,417.219,1673.63Zm5.05-3.13a1.616,1.616,0,0,1-.525-1.22,1.8,1.8,0,0,1,1.75-1.78,1.734,1.734,0,0,1,1.225.5,1.65,1.65,0,0,1,.525,1.25,1.709,1.709,0,0,1-1.75,1.75A1.734,1.734,0,0,1,422.269,1670.5Zm4.625,23.45,10.3,18.8a3.751,3.751,0,0,1,.45.88,0.2,0.2,0,0,1-.175.27,6.171,6.171,0,0,1-.975.05h-31.1a1.131,1.131,0,0,1-.725-0.12,1.032,1.032,0,0,1,.225-0.68q0.649-1.245,2.6-4.8l4.85-8.85a0.933,0.933,0,0,1,.325-0.4,0.6,0.6,0,0,1,.525.05,19.047,19.047,0,0,0,3.775.75,4.321,4.321,0,0,0,3.775-1.3c0.3-.3.933-0.98,1.9-2.05a13.925,13.925,0,0,1,3.6-2.8,0.712,0.712,0,0,1,.4-0.07,0.463,0.463,0,0,1,.3.27h-0.05Zm-2.35,15.13a1.943,1.943,0,0,0,.2-1.6,2.054,2.054,0,0,0-1.025-1.25,2.132,2.132,0,0,0-2.875.8,2.1,2.1,0,0,0-.175,1.6,2,2,0,0,0,1,1.3,2.05,2.05,0,0,0,1.625.17A2.189,2.189,0,0,0,424.544,1709.08Zm5.025-4.8a2.386,2.386,0,0,0,.2-1.85,2.476,2.476,0,0,0-1.15-1.5,2.325,2.325,0,0,0-1.85-.28,2.352,2.352,0,0,0-1.5,1.18,2.394,2.394,0,0,0-.25,1.9,2.454,2.454,0,0,0,1.175,1.5,2.3,2.3,0,0,0,1.9.22A2.389,2.389,0,0,0,429.569,1704.28Zm-10.725-18.08a3.5,3.5,0,0,1-1.05-2.57,3.465,3.465,0,0,1,1.075-2.58,3.682,3.682,0,0,1,5.15,0,3.622,3.622,0,0,1,0,5.15A3.713,3.713,0,0,1,418.844,1686.2Zm-0.7,7.53a2.643,2.643,0,0,1,1.825-4.53,2.568,2.568,0,0,1,1.85.75,2.477,2.477,0,0,1,.775,1.85,2.62,2.62,0,0,1-.75,1.88,2.493,2.493,0,0,1-1.85.77A2.435,2.435,0,0,1,418.144,1693.73Z" transform="translate(-375.5 -1649.5)"/>
  </svg>
</div>

И выглядит так:

Working code with SVG

Я хотел бы изменить SVG на что-то другое, например, рукопожатие (или что-то еще, по крайней мере ...). У меня есть файл рукопожатия SVG, который выглядит следующим образом:

handshake example

Когда я создаю взгляд в файле SVG, я нахожу путь, который диктует координаты рукопожатие изображение. Когда я копирую и вставляю путь в код и удаляю элемент преобразования, я получаю следующее:

<svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91" >
    <rect class="svg-icon__border" x="0.5" y="0.5" width="90" height="90"/> 
    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>
    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>
    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>
    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>
    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>
    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>
    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>
  </svg>

Код выше выглядит так:

New SVG code scale incorrect

Я не могу заставить новый SVG масштабироваться должным образом до размера первого SVG. С помощью функции преобразования окна просмотра я могу получить изображение более или менее в центре окна просмотра, но не в нужном размере.

Пожалуйста, помогите этому новичку ie! Большое вам спасибо

Ответы [ 2 ]

2 голосов
/ 04 апреля 2020

Как работает viewBox

Это на самом деле очень просто.

Чтобы браузер масштабировал ваш SVG-контент, чтобы соответствовать ширине и высоте, которые вы указали, он должен знать, как большой размер контента.

То, как вы говорите, насколько велик контент, - это атрибут viewBox. Значения в viewBox:

<minimum X> <minimum Y> <width> <height>

Итак, ваш контент был квадратом от (10,20) до (80,80). Определение viewBox, которое точно соответствует этому квадрату, будет выглядеть следующим образом:

viewBox="10 20 70 60"

Это означает, что в левом верхнем углу вашего контента 10,20, ширина 70, а высота 60.

Вот диаграмма, чтобы показать, что я имею в виду.

<svg width="300" height="300">
  <g transform="translate(50 50) scale(2)">
     >!-- axes -->
     <line x1="0.25" y1="-100" y1="0.25" y2="300" stroke="grey" stroke-width="0.5"/>
     <line x1="-100" y1="0.25" x2="300" y2="0.25" stroke="grey" stroke-width="0.5"/>

     <!-- bounds -->
     <line x1="10.25" y1="-100" x2="10.25" y2="300" stroke="grey" stroke-width="0.5" stroke-dasharray="3 3"/>
     <line x1="-100" y1="20.25" x2="300" y2="20.25" stroke="grey" stroke-width="0.5" stroke-dasharray="3 3"/>
     <line x1="80.25" y1="-100" x2="80.25" y2="300" stroke="grey" stroke-width="0.5" stroke-dasharray="3 3"/>
     <line x1="-100" y1="80.25" x2="300" y2="80.25" stroke="grey" stroke-width="0.5" stroke-dasharray="3 3"/>

     <!-- rectangle -->
     <rect x="10" y="20" width="70" height="60" fill="rebeccapurple"/>
     
     <!-- labels -->
     <g fill="grey" font-size="6px" font-family="sans-serif">
       <text x="-2" y="-2" text-anchor="end">0,0</text>
       <text x="12" y="-2">10</text>
       <text x="82" y="-2">80</text>
       <text x="-2" y="27" text-anchor="end">20</text>
       <text x="-2" y="87" text-anchor="end">80</text>
       <text x="45" y="87" text-anchor="middle">width = 70</text>
       <text x="82" y="50">height = 60</text>
     </g>
  </g>
</svg>

Теперь, когда браузер знает границы вашего SVG-контента, он может рассчитать, как масштабировать и позиционировать этот контент, чтобы он поместился в вашем окне просмотра. Окно просмотра просто означает прямоугольник на вашей странице, в который рисуется SVG. Вы определяете это, используя width и height.

Ваше рукопожатие SVG

Очевидно, что viewBox для значка рукопожатия слишком велик для содержимого. Из-за этого, это не масштабируется достаточно. Нам нужно найти окно просмотра, которое точно соответствует форме иконки рукопожатия.

Но держитесь ...

Но у нас есть проблема. Вы сохранили квадратную форму от предыдущей иконки. Если мы увеличим форму руки, прямоугольник станет слишком большим. Простейшим решением вашей проблемы было бы просто увеличить масштаб и переместить остальное содержимое в соответствии с вашим квадратом:

.svg-icon__border {
  fill: none;
  stroke: red;
}
<svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91" >
        <rect class="svg-icon__border" x="0.5" y="0.5" width="90" height="90"/>
        <g id="test" transform="translate(25,25) scale(1.3)">
            <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>
            <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
            <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>
            <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>
            <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>
            <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>
            <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>
            <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>
        </g>
      </svg>

Настройка viewBox

Другой вариант - избавиться от квадрата, поэтому вам не нужно об этом беспокоиться. Рассчитайте более подходящий viewBox. Затем вы можете изменить размер и разместить значок, как вам нравится. И если вы захотите вернуть квадрат позже, вы можете добавить стиль рамки к его родительскому контейнеру.

Итак, как нам определить, каким должен быть правильный viewBox. Ну, есть несколько способов сделать это.

  • Вы можете сделать это экспериментально, вручную изменив значения
  • Вы можете загрузить его в векторный или SVG-редактор и использовать линейки
  • Вы можете использовать Javascript метод getBBox() в SVG. Функция getBBox() возвращает границы содержимого. Они помогут сообщить, какими должны быть значения viewBox.

Если мы удалим квадрат из SVG и используем этот последний метод, мы получим значения ограничивающего прямоугольника:

{
  "x": 0.0009997636079788208,
  "y": 6.000142574310303,
  "width": 31.998998641967773,
  "height": 19.99785614013672
}

console.log(document.getElementById("test-svg").getBBox());
.svg-icon__border {
  fill: none;
  stroke: red;
}
<svg id="test-svg" class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91" >
    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>
    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>
    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>
    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>
    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>
    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>
    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>
  </svg>

Сформировав эти значения, мы увидим, что наш значок охватывает (примерно) от 0 до 32 в направлении X и от 6 до 20 в Y направление.

Исходя из этого, совершенно очевидно, что этот значок был разработан для использования в формате SVG 32x32. Итак, давайте установим viewBox на это:

viewBox="0 0 32 32"

Вот как это выглядит, все еще с width="91" height="91". Я также добавил зеленую рамку вокруг SVG в качестве замены удаленного прямоугольника.

svg {
  border: solid 1px green;
}
<svg id="test-svg" class="c-section-heading__icon svg-icon" width="91" height="91" viewBox="0 0 32 32" >
    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>
    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>
    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>
    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>
    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>
    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>
    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>
  </svg>

Следующие шаги

Теперь, когда у нас есть «правильные» viewBox, вы можете видеть, что руки масштабируются, чтобы заполнить наши область просмотра (width и height). Но это означает, что отступ вокруг иконки, который был у оригинала, исчез.

Чтобы вернуть этот отступ, у вас есть несколько вариантов:

  1. Включить заполнение в viewBox. Вы можете сделать это, вычтя сумму из значений <minimum X> и <minimum Y> в viewBox и добавив дополнительные к значениям <width> и <height>. Например, если мы добавим заполнение 16 единиц вокруг нашей формы 32x32, скорректированное значение viewBox будет:

    viewBox = "- 16 -16 64 64"

Демо:

svg {
  border: solid 1px green;
}
<svg id="test-svg" class="c-section-heading__icon svg-icon" width="91" height="91" viewBox="-16 -16 64 64" >
    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>
    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>
    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>
    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>
    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>
    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>
    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>
  </svg>

Или вы можете использовать стили CSS для определения размера и размещения вашего нового значка в контейнере <div>.

Демонстрация:

div.icon-container {
  display: inline-block;
  padding: 23px;
  border: solid 1px green;
}

div.icon-container svg {
  width: 45px;
  height: 45px;
}
<div class="icon-container">
  <svg id="test-svg" class="c-section-heading__icon svg-icon" viewBox=" 0 0 32 32" >
    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>
    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>
    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>
    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>
    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>
    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>
    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>
  </svg>
 </div>

Надеюсь, это поможет.

1 голос
/ 04 апреля 2020

Вам нужно будет обернуть рукопожатие в символ и дать символу атрибут viewBox. Затем вы используете символ и задаете элементу use нужную вам позицию (x, y) и размер (ширину, высоту).

<use xlink:href="#handshake" x=".5" y=".5" width="90" height="90" />

Чтобы узнать значение для viewBox сначала завернул рукопожатие в элемент g, и я использовал метод getBBox().

<svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91" >
    <rect class="svg-icon__border" x="0.5" y="0.5" width="90" height="90" fill="gold"/> 

  <symbol id="handshake" viewBox="0 0 32 32">
    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>
    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>
    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>
    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>
    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>
    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>
    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>
    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>
  </symbol>
  <use xlink:href="#handshake" x=".5" y=".5" width="90" height="90" />
  </svg>
...