2015-05-28 2 views
3

Обычно я использую GWT ClientBundle для управления моими изображениями в моем приложении, как этотSVG пользователя изображения в GWT ClientBundle (ImageBundle)

@Source("icons/info.png") 
ImageResource info(); 

Нет, я хочу, чтобы перейти к .svg графики, но я не нашёл способ использования svg в ClientBundle, например SVGResource или что-то в этом роде. Я знаю, что svg поддерживается в GWT, и есть возможности вставить эти графики внутри GWT, но я хотел бы использовать преимущества ClientBundle + преимущества svg. Неужели кто-то уже решил эту проблему?

ответ

12

ImageResource для растровых изображений, которые компилятор GWT может оптимизировать в той или иной форме, и вы можете запросить их размера ,

Для векторных изображений, похожих на SVG, вы можете просто использовать DataResource с аннотацией @MimeType("image/svg+xml").

@Source("icons/info.svg") 
@MimeType("image/svg+xml") 
DataResource info(); 

Обратите внимание, что вы не можете использовать в CssResource в @sprite то, но вы можете получить URL ресурса для использования в, например, с помощью background-image@url.
Вы также не можете передать ресурс в виджет Image, но затем вы можете просто передать его getSafeUri().


Если вы хотите содержание SVG вместо использования его в качестве URL изображения, то вы можете использовать TextResource. Вам необходимо передать его как setInnerHTML элементу или setHTML в виджет, чтобы его проанализировать в браузере.

+0

Решение DataResource в сочетании с MimeType работает хорошо для меня. Спасибо! – mxlse

3

LIB-GWT-SVG. Он поддерживает последнюю версию GWT (2.7.0) и кажется зрелым.

Они реализованы SVG integration with UIBinder и добавил SVGResource класс, который вы можете упаковать так же, как ImageResource

@Source(...) 
SVGResource bundledResource; 
+0

С этим у меня были проблемы с некоторой графикой svg, которые, вероятно, не были в допустимом формате для этой библиотеки. Я забыл сказать. Но с совместимыми svgs он работал как шарм. – mxlse

+1

Я думаю, что есть флаг, чтобы игнорировать проверку, но решение Thomas Broyer отлично, вы должны пойти с этим –