Итерировать html svg на стороне сервера или на стороне клиента с помощью js?

0

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

Используя значки svg в html, одна страница может иметь 10-20 из них, делая загрузку около 5kb-20kb только для передачи кода значка svg.

Нам нужно использовать код, потому что значки должны быть изменены, например, штрих, цвет. В противном случае будут использоваться файлы.svg.

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

Является ли эта плохая практика, полагаясь на телефон, чтобы выполнить такую задачу? Говорят, что смартфон, которому 2 года, будет использовать до многих своих ресурсов/памяти/процессора в веб-приложении?

То, как я добавляю значок svg, выглядит так:

var arrowIconNext = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"'+
                'width="11.8px" height="46.8px" viewBox="0 0 11.8 46.8" enable-background="new 0 0 11.8 46.8" xml:space="preserve">'+
                '<polyline fill="none" stroke-width="1" stroke-miterlimit="10" points="1.3,1 20.2,24 5.3,46.2 "/>'+
                '</svg>';

$('.content .icon').html(arrowIconNext);

Это циклически проходит через все.icons на странице и вставляет svg html.

  • 0
    По-разному. Аппаратные требования SVG во многом зависят от сложности SVG. Простой SVG может быть визуализирован небольшим мобильным процессором в кратчайшие сроки, но возможно создать SVG, который занимает секунды для рендеринга даже на рабочей станции высокого уровня.
  • 0
    Кстати: знаете ли вы, что вы можете стилизовать SVG с помощью CSS?
Показать ещё 3 комментария
Теги:
svg

1 ответ

1
Лучший ответ

Некоторые из ваших шаблонов не нужны. Идентификатор атрибута может также оказаться ненужным, но трудно сказать, не видя, используете ли вы его.

var arrowIconNext = '<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"'+
                    'width="11.8px" height="46.8px" viewBox="0 0 11.8 46.8">'+
                    '<polyline fill="none" stroke-width="1" stroke-miterlimit="10" points="1.3,1 20.2,24 5.3,46.2 "/>'+
                    '</svg>';

Также gzip все ваши данные и отправить его на телефон как Content-Encoding: gzip

Поделиться
  • 0
    Я не использую svg id. Спасибо за урезанную версию

Ещё вопросы

Сообщество Overcoder
Наверх
Меню