Jump to content

Поддержка SVG в 1.15.5.0


Yaroslav Brovin

926 views

Добрый день, уважаемые разработчики.

Спешим порадовать вас главным нововведением 1.15.5.0 - это поддержка векторных изображений SVG.

Добавление и использование

В новой версии добавлен новый тип ресурсов - SVG изображение. В него вы можете загрузить SVG файл в дизайнере ресурсов для дальнейшего использования в компонентах. Добавление SVG изображения доступно в дизайнере ресурсов: Project -> FGX Assets Manager.

image.png image.png

При использовании данного изображения в компонентах, происходит автоматическое формирование растрового изображения TfgBitmap с требуемым текущим коэффициентом масштабирования окна и указанным размером иконки. При этом логический размер (dp, без учета коэффициента масштабирования) иконки указывается в окне редактирования SVG файла.

image.png

Особенности реализации

Как выяснилось в ходе разработки, iOS и Android не поддерживают SVG изображения. Вместо этого, они конвертируют SVG файлы в Android Studio / XCode в свой внутренний промежуточный формат, которыйв свою очередь уже используется для формирования растровых изображений. 

В связи с этим, нам пришлось полностью своими силами разработать парсер и рендер SVG. В итоге мы выполняем обработку SVG файла на стороне Delphi и формируем наш формат, используемый для отрисовки SVG. Далее в рантайме по файлам нашего формата, генерируем изображения.

Генерация 

При необходимости вы можете сформировать экземпляр растрового изображения TfgBitmap по SVG изображению любого размера. Для этого вам нужно запросить ресурс у TfgAssetsManager. При этом вы отвечаете за удаление экземпляра TfgBitmap:

uses
  FGX.Canvas, FGX.Canvas.Types, FGX.Assets, FGX.Assets.SVG;

var
  Asset: TfgAssetSVG;
  Bitmap: TfgBitmap;
begin
  if TfgAssetsManager.Current.Find<TfgAssetSVG>('SVG asset name', Asset) then
  begin
    Bitmap := Asset.CreateBitmap(TSizeF.Create(100, 20));
    try
      // Works with bitmap.
    finally
      Bitmap.Free;
    end;
  end;
end;

Ограничения

1. Неполноценная поддержка спецификации SVG. Мы проверили наш SVG парсер на иконках разных поставщиков от MaterialDesign, Microsoft Visual Studio Icons и до Icons 8. Однако, стандарт SVG довольно большой и написать за такое короткое время полноценный парсер задача довольно непростая. Несмотря на это, мы хотели бы, чтобы вы делились с нами SVG файлами, которые не могут прочитаться и отобразиться корректно. Это поможет нам оперативнее расширять парсер в тех направлениях, которые нужны для отображения массовых SVG изображений. 

При загрузке изображения в дизайнере, у иконки появится специальный значок ошибки, если она не поддерживается.

 image.png

Если файл загрузился и может быть отображен, но при чтении не удалось распознать какие-либо элементы, то он помечается значком-предупреждением:

warn.png

Это означает, что теоретически изображение может отобразиться, но оно может отображаться не корректно.

2. Отображение превью svg иконки в дизайнере ассетов не говорит о поддержке SVG файла. Для отображения SVG изображений в IDE мы используем Skia4Delphi. Однако, практика показала, что иногда SVG иконки, которые мы отображаем успешно на устройствах, не отображаются корректно в Skia4Delphi.

Например, отображение иконки в Runtime через FGX Native:

image_2023-03-29_21-43-06.png

В то же время, Skia4Delphi (дизайнер IDE) просто показывает черный квадрат:

image_2023-03-29_16-56-53.png

Поэтому вам необходимо временно проверять корректно отображения SVG иконки именно на основании Runtime. Несмотря на то, что мы можем формировать SVG изображения и в дизайнере тоже нашим средство, мы пока используем Skia4Delphi, чтобы была возможность сравнить, как иконки должны отображаться корректно (парсер SVG должен по идее поддерживать больше функций). Спустя время, как только наш парсер будет поддерживать все ваши иконки, мы заменим в дизайнере рендер SVG иконок в дизайнере на наш.

3. Временно недоступна возможность динамически добавлять SVG файл в рантайме. Например, вы загрузили SVG файл в рантайме и хотите его отобразить. Несмотря на то, что технически у нас уже есть такая возможность, наш парсер пока не оптимизирован, чтобы выполнять преобразование SVG формата достаточно быстро. Чтобы потенциально не побуждать пользователей к проседанию производительности, данная возможность временно недоступна. При этом мы считаем, что такой сценарий довольно редкий. И по большей части, вы будете использовать именно заранее добавленные SVG изображения.   

  • Like 6
  • Thanks 1

7 Comments


Recommended Comments

My experience with SVG and Delphi is that Image32 https://github.com/AngusJohnson/Image32 and html component library have the best results to read correctly most of the svg files that I tried. The possibility to load dinamically the svg can be interesting to retry it from a service, anyway I think always will be possible to render it on a navigator.

  • Like 2
Link to comment

I tried to import svg created with Inkscape but I got " SVG File is not supported". However it is correctly rendered in  preview on the left side but not on the form. I have attached sample (had to change extension to txt) 

test svg.txt

Link to comment
  • Administrators
5 hours ago, Michal said:

I tried to import svg created with Inkscape but I got " SVG File is not supported". However it is correctly rendered in  preview on the left side but not on the form. I have attached sample (had to change extension to txt) 

test svg.txt 2.31 kB · 1 download

 

Link to comment
  • Administrators
9 hours ago, Michal said:

I tried to import svg created with Inkscape but I got " SVG File is not supported". However it is correctly rendered in  preview on the left side but not on the form. I have attached sample (had to change extension to txt) 

test svg.txt 2.31 kB · 1 download

If you are using Inkscape, use "Optimized SVG" format, when you save SVG file. It simplificates content and makes final SVG file faster for rendering and parsing. 

  • Like 1
Link to comment

Дизайнер разработал макет для приложения 

Предоставил данные в Figma

После нескольких манипуляций я получил svg файл (в архиве)

r.thumb.png.2d7791a2cd7e53a5a6fe345dc692c7fc.png

А загрузится мой пример в проект корректно?

Руководство дает добро на покупку последней версии библиотеки, если будет уверено что мы сможем использовать разработки дизайнера, триал еще не такой актуальный как бы хотелось.

 

svg.zip

Link to comment
  • Administrators

Добрый день, Дмитрий.

Ваш файл не будет корректно отображен. Потому что он использует SVG эффекты, которые нами не поддерживаются на текущий момент.

Спасибо

Link to comment
Guest
Add a comment...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...