Зарядку что ли ??
Открываем Хром вкладку NetWork и делаем как на скриншоте
потом после этого нажимаем кнопку Play и ниже появится ссылка на видео наводим и ПКМ : open in new tab и всё
Тут не то что бы wordpress со своим WooCommerce а просто атрибут html в input
Текст вводят через input и он записывается в базу данных и от туда выводится уже как get_the_title() т.е обычный заголовок ...
Каким образом мы может ограничить количество символов ? Допустим можно добавить вот такую строчку : <input type="text" size="30" maxlength="10"> где maxlehgth- это и есть количество символов хотя и это можно обойти ..
Так же можно на js разрешить вводить определённое кол-во символов но и js можно выключить
То самое 100% правильное использовать серверный язык - php и на нём ограничить количество символов...
Я тут не совсем понял что надо что бы не уменьшалось ....
Pattern имеет viewbox который растянет/сожмёт т.е сделает резиновым весь документ и всё содержимое SVG
Этот механизм не от вас зависит ...а этот механизм сделан в браузере
К примеру Yandex браузер (писали в поддержку хотели узнать how do it) реализована пиксельное изъятие цвета
А вот Opera Chrome(Визуальные Вкладки)Firefox берут фавикон за основу ... делают минискриншот + название сайта с фавикон ...это сложно - в общем напишите в поддержку каждого браузера и вам опишут механизм
https://codepen.io/topicstarter/pen/rPpZoa такие вещи на SVG делаются как в лужу Пукнуть ... что и даёт нам возможность для работы с canvas и анимировать каждую деталь по отдельности
