Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как использовать svg-картинки встроенные в html ? (https://javascript.ru/forum/misc/51671-kak-ispolzovat-svg-kartinki-vstroennye-v-html.html)

javascriptus-maximus-∆ 15.11.2014 10:14

Как использовать svg-картинки встроенные в html ?
 
задача - встроить векторные картинки в тело документа и использовать их как css-фоны в элементах документа

то есть вместо url както ссылаться на эти файлы
знаю что с помошью blob такое делается, но хотелось бы не такое сложное решение

BETEPAH 15.11.2014 10:22

мне кажется, в этом видео говорилось об этом https://vimeo.com/108093997
<iframe src="//player.vimeo.com/video/108093997" width="500" height="167" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/108093997">Владимир Кузнецов, Engine6 | Я ♥ SVG | FrontTalks 2014</a> from <a href="http://vimeo.com/fronttalks">FrontTalks Conference</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

javascriptus-maximus-∆ 16.11.2014 13:00

неожиданно потерял мысль зачем мне это

javascriptus-maximus-∆ 16.11.2014 15:03

Цитата:

Сообщение от BETEPAH (Сообщение 340997)
мне кажется, в этом видео говорилось об этом https://vimeo.com/108093997
<iframe src="//player.vimeo.com/video/108093997" width="500" height="167" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/108093997">Владимир Кузнецов, Engine6 | Я ♥ SVG | FrontTalks 2014</a> from <a href="http://vimeo.com/fronttalks">FrontTalks Conference</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

видео понравилось
доклатчик супер - есть еще чо в его исполнении???
напомнил мне моего препода информатики в пту

простое решение - встраивать закодированый svg base64 текст в таблицу стилей

но не могу оправдать встраивание графики в тело документа
ведь по идее любая графика встраивается в виде линков
это же фундаментальный принцип архитектуры

javascriptus-maximus-∆ 16.11.2014 15:10

наверное единственное оправдание такого решения - возможность создания приложения в виде одного html-файла

BETEPAH 17.11.2014 10:29

Цитата:

Сообщение от javascriptus-maximus-∆
доклатчик супер - есть еще чо в его исполнении???

Именно его видел впервые. А вообще довольно много интересных докладов в Веб-стандартах и FrontTalks

voral 18.11.2014 16:08

Такое ощущение, что в этой теме вы так же смешиваете несколько понятий и технологий в одну кучу.

Цитата:

Сообщение от javascriptus-maximus-∆
наверное единственное оправдание такого решения - возможность создания приложения в виде одного html-файла

не совсем вы поняли смысл. Каким бы шустрыми сейчас не были каналы - скорость загрузки/отображения страницы важный вопрос.
При этом надо понимать если в оформлении ваших страниц используется сотня мелких изображений, это означает, что к вашему серверу будет как минимум 101 обращение (картинки + html). При этом одномоментно/параллельно браузер выполняет весьма ограниченное количество запросов. Соответственно загрузка вашей страницы будит идти неоправданно долго. И тут на помощь приходят различные методы, как пример: картинки объединяют в спрайты. Ну, а также их кодируют в base64 и вставляют "прямо" в css. Вставлять можно и gif, и png, и jpg

Это что касается вставки картинок "прямо в html".

Теперь svg. Вообще это разновидность форматов графических фалов, на равне с gif, jpg, png. Правда, в отличии от популярной троицы, это векторный формат. Плюсы векторных форматов можете погуглить. Но, в наше случае, суть в другом. svg можете рисовать прямо в браузере скриптом. С нуля. В зависимости от действий пользователя. От ответов аякс и т.п. Отсюда и "оправдания поведения". Рисуйте, например, "графически-навороченные" графики на основе периодически получаемых данных ..... Да много можно придумать гипотетически. Просто надо понимать, что "если что" у вас есть на вооружении такой инструмент

javascriptus-maximus-∆ 19.11.2014 05:59

voral, спасибо, прояснилось

ваистену есть смысл внедрять в приложение например иконки интерфейса
и встраивать все стили и скрипты в один хтмл-файл

однако сомнительна возможность отрисовывать svg в браузере когда есть канвас со схожими векторными делами
наверное следует рассматривать svg как формат сложных рисунков и схем сгенерированных в спецприложениях типа итлюстратора и автокада

voral 19.11.2014 17:32

Прошу прощения. Поспешил я. Отвечал между делом в итоге скомкал ответ да еще и переклинило что-то.
Вот почитайте, например здесь

PS практически первая ссылка из гугула. Рекомендую вам не ограничиваться ответами на форуме, а чуть расширять их используя гугл. ;)


Часовой пояс GMT +3, время: 15:32.