Как вставить svg в php

Можно ли в php файлы битрикса вставлять svg?

Если в файл php который отвечает за вкладку с инфой, к примеру о доставке (. /help/delivery/index.php) вставить svg рисунок — он будет читаться корректно ?

• Вопрос задан более двух лет назад
• 99 просмотров

1 комментарий

Простой 1 комментарий

а попробовать не судьба? битрикс здесь никакой роли не играет
Решения вопроса 2
Алексей Уколов @alexey-m-ukolov
Смотря как вставить.
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать

Вячеслав Шевченко @WebDev2030
Битриксоид до мозга и костей

include ('path_to_svg') //я обычно использую абсолютный в системе т.е. например $_SERVER["DOCUMENT_ROOT"] . 'local/templates/mytmpl/images/my.svg'

Тогда содержимое файла будет вставлено. Но надо чтобы там был только svg, а то некоторые редакторы добавляют кучу служебных данных которые мог сломать код. просто прогони через svgo свой svg и всё.

Добавляем файлы SVG через PHP

Используя PHP можно загружать содержимое SVG-файлов без лишних запросов к серверу, без использования img или object.
В чем плюс — меньше HTTP-запросов, проще и красивее код бек-энда.
В чем минус — исходный код сайта становится более громоздким и уродливым, а так же невозможность закешировать полученный SVG-элемент.

Для чего это может быть нужно — чтобы с svg-элементом можно было проводить манипуляции, задавать стили на ховер или анимации.

Используем такой код:

Для CMS WordPress я использовал такой формат:

Важный нюанс

get_stylesheet_directory_uri()

будет создавать дополнительную нагрузку на сервер, потому что будет выводить урл дочерней темы без слеша, то есть будет запрашивать файл по урлу http://example.com/wp-content/themes/twentyten .

В то время, как функция

get_stylesheet_directory()

будет возвращать абсолютный путь до каталога темы /home/site.ru/www/wp-content/themes/theme и не будет создавать лишние запросы на сервер.

По коду видно, что сначала мы получаем путь к файлу icon-mail.svg , который лежит в папке шаблона и затем уже подставляем его в file_get_contents() .

В данном случае, более правильно использовать file_get_contents() , а не include() или include_once() , поскольку SVG иногда экспортируется с – это первая строка в SVG, которую PHP может убрать.

Если неправильно указать путь к файлу, то получи ошибку, так что внимательно с получением урла svg.

Получается такой пример в PHP:

И на выходе будет выводиться такой код:

При использовании svg в таком формате можно задавать различные стили и обращаться к элементам svg с помощью CSS:

Статья в процессе написания. Начинал писать ее в 2013 году, потом все менялось…

Создаем вариации для товаров в WooCommerce. 1. Во вкладке Product data выбираем Variable Product 2….

Задача — сделать красивый внешний вид для вариаций товаров в WooCommerce. По умолчанию, стандартный вид…

Задача такая — выводить для различных товаров таймер обратного отсчета, когда заканчиваются скидки или акции…

Работа с SVG. Вставляем SVG на веб страницу

В этом уроке мы рассмотрим способы вставки SVG на веб страницы. Сравним различные варианты и браузерную поддержку:

Через тег

Самый простой способ вставить SVG — воспользоваться тегом :

Заметка: размеры изображения можно задать в самом SVG документе; Увеличивать можно до любого размера без потери качества, ведь это векторная графика. Так же, данный элемент можно оформлять через CSS.

Через CSS

Так же SVG можно вставить на страницу через CSS: через свойство background-image:

header < background: url(assets/svg/columns.svg); >

Если в SVG присутствует какой-то скрипт, интерактивность и ссылки, то они будут игнорированы.

Через тег SVG

В HTML5 есть возможность прямой вставки SVG через одноимённый тег:

      
This is the markup of an ordinary HTML5 page.
 
 
Данный способ сохраняет все скрипты, ссылки и прочий интерактив.
 Через теги  

Наилучшая совместимость с IE и сохранение основных особенностей SVG.

Как шрифт через @font-face

Поскольку любой шрифт это ни что иное, как набор векторных фигур, то SVG можно вставить на страницу через свойство @font-face:

@font-face

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/428/Using-SVG-In-Web-Pages
Перевел: Станислав Протасевич
Урок создан: 25 Декабря 2014
Просмотров: 89589
Правила перепечатки

5 последних уроков рубрики "HTML5"

• 

Расширяем возможности HTML за счёт создания собственных тегов

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

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

Создание форм с помощью Webix Framework — 4 практических примера

Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Добавляем svg-файл на стркницу с помощью php

SVG-файл можно добавить на страницу разными способами, как картинку через тег , или через тег , но используя эти способы нельзя работать с svg-файлом как с HTML, т.е. задавать ему цвет, фон и т.п.

Чтобы работать с svg-файлом как с HTML нужно разместить его контент в следующем виде:

Но на сервере файл хранится в виде файла типа file.svg. Что привести в нужны формат используем php-функцию file_get_contents(), она вернет контент файла.

В html-коде вы выводится нужный формат данных, с которым можно работать при помощи css.