Сэр Серж aka Sir Serge (Сергей Лебедев) - official site
Статьи и заметкиРасчетыО сайте

Отображение графики SVG, получаемой со скрипта на сайте

Например, есть у вас скрипт, который выдаёт картинки:

<?php
  .....здесь код обращается к базе данных (или еще куда) и помещает в $image двоичное содержимое картинки....
  header("Content-type: image/*");
  echo $image;
?>

вы в коде html со стороны клиента размещаете тег

  <img src="url_скрипта">

и получаете картинку. До тех пор, пока не столкнетесь с графикой .svg

В этом случае ничего не отображается, браузер для свойств "картинки" ничего не пишет - де пиктограмма 20х20, тип неизвестен. Если меняем скрипт на следующее:

<?php
  .....здесь код обращается к базе данных (или еще куда) и помещает в $image двоичное содержимое картинки....
  header("Content-type: image/svg+xml");
  echo $image;
?>

то на странице опять таки ничего не отображается, однако если браузеру подсунуть прямой url скрипта (либо кликнуть пункт "Открыть изображения" из "меню правой кнопки", то графика SVG благополучно будет отображена отдельным документом.

Итак, что же надо?

А надо применить единственный способ, при котором графика отобразится на странице, воспользовавшись тегом object:

 <object type="image/svg+xml" data="url_скрипта" id=’object’ class='icon' width=1100 height=600></object>

Обратите внимание на заданные явным образом высоту и ширину кадра.

Следует отметить, что файлы .svg, сгенерированные inkscape, отображаются своеобразно, благодаря перевернутой системе координат относительно "нативных методов". Нулевая точка - в левом нижнем углу. Если изображения специально не подготавливать, браузер будет рассматривать их как поле формата А4, или другого, установленного в вашем редакторе по умолчанию. Для того, чтобы изображение правильно кадрировалось, его границы следует определять вручную в свойствах документа относительно этой точки, и всё изображение подтаскивать к ней.

Напоследок картинка для подтверждения методики:

Здесь источником изображения "нативный" svg, подвергавшийся редактированию в inkscape, перемещенный к нулю системы координат и подрезанный. Поэтому нет "лишнего поля" и скроллеров.


Текст опубликован: 2019-04-29

Последние изменения текста: 2019-04-29


Вы можете добавить свои комментарии.

Комментарий появится на сайте только после того, как он будет проверен администрацией на запрещённую законодательством информацию.

Для возможности внесения комментариев в браузере должна быть включена поддержка JavaScript. Реклама и ссылки на сайты, не относящиеся к делу, являются прямым основанием удаления комментария. Поля "E-mail" и "WWW" обязательными для заполнения не являются, поле E-Mail не публикуется. Если хотите просто что-то написать автору статьи, без публикации на сайте - воспользуйтесь специальной формой под пунктом меню "О сайте". Администрация оставляет за собой право публиковать или не публиковать адреса, введенные в поле www, а также при необходимости редактировать текст вашего сообщения. Ответы на ваши сообщения по введенному вами E-mail автоматически сайтом не высылаются. Теги PHPBB и HTML не действуют.


Ещё тексты по этой теме:

64-битный компилятор MinGW + NetBeans 8.2. Установка под Windows 10 x64 (2017-11-06/2017-11-06)
Представление о времени в операционных системах и языках программирования (2016-05-11/2016-05-11)
Использование строк UnicodeString и маркированных кодовой страницей AnsiString/RawByteString в приложениях Lazarus/LCL (2012-12-14/2012-12-14)
Символы и строки в Unicode-версиях FreePascal (2012-07-19/2012-07-23)
Национальный вопрос в C/C++ (2011-12-09/2011-12-09)
Lazarus :: Resurrection :: прикладная кадаврология (2011-11-11/2011-11-11)
Халява, сэр. Бесплатные средства кроссплатформенной разработки (2010-01-11/2010-01-11)
Copyright © 2003-2022 by Sir Serge