Сэр Серж 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, перемещенный к нулю системы координат и подрезанный. Поэтому нет "лишнего поля" и скроллеров.


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

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

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

Copyright © 2003-2019 by Sir Serge