legacy-knowledge-base
公開されました Jul. 2, 2025

SVGファイルを表示する際の問題点

投稿者

Christopher Lui

knowledge-article-header-disclaimer-how-to

knowledge-article-header-disclaimer

legacy-article

learn-legacy-article-disclaimer-text

Documents & Mediaに .svg 画像ファイルをアップロードした場合、Web コンテンツの作成・編集中に Web Content に追加することができなくなります。 ただし、Webコンテンツの画像選択画面で.svgをアップロードすると、期待通りに表示されるようになります。

解決策

ここにはいくつかの課題があります。

1. SVGファイルには、サムネイルやプレビュー画像は生成されません。 これは残念ながら、SVGファイルタイプがLiferayプラットフォームが利用しているサードパーティライブラリでサポートされていないための制限です: GitHub Image Metadata Readerをご参照ください。

2. Webコンテンツの画像のファイルエクスプローラーにSVGファイルが表示されない。 これは、以下のポータルのプロパティに image/svg+xml を追加することで解決することができます:

dl.file.entry.preview.image.mime.types=image/bmp,image/gif,image/jpeg,image/pjpeg,image/png,image/tiff,image/x-citrix-jpeg,image/x-citrix-png,image/x-ms-bmp,image/x-png,image/x-tiff

このプロパティを追加することで、少なくともWebコンテンツの作成時に.svg画像を選択し、含めることができるようになります。

3. Web Content Structuresを作成しようとしているときにSVGファイルをアップロードすると、失敗して冒頭のようなエラーが表示されます:

2018-04-18 08:10:28.943 ERROR [http-apr-8080-exec-4][PortletServlet:112] javax.portlet.PortletException: com.liferay.portal.kernel.exception.SystemException: java.io.IOException: Unsupported image type javax.portlet.PortletException: com.liferay.portal.kernel.exception.SystemException: java.io.IOException: Unsupported image type at com.liferay.portal.kernel.portlet.LiferayPortlet.callActionMethod(LiferayPortlet.java:204) at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.callActionMethod(MVCPortlet.java:418) at com.liferay.portal.kernel.portlet.LiferayPortlet.processAction(LiferayPortlet.java:94) at com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet.processAction(MVCPortlet.java:260) at com.liferay.portlet.FilterChainImpl.doFilter(FilterChainImpl.java:71) at com.liferay.portal.kernel.portlet.PortletFilterUtil.doFilter(PortletFilterUtil.java:48) at com.liferay.portal.kernel.servlet.PortletServlet.service(PortletServlet.java:108) at javax.servlet.http.HttpServlet.service(HttpServlet.java:729)

このエラーは、有効なドキュメントファイルの拡張子としてSVGファイルを追加した場合でも発生します。 これは LPS-67171で報告されている。 回避策としては、まずSVGファイルをDocuments & Mediaにアップロードし、その後Web Content Structureで画像として選択します。

did-this-article-resolve-your-issue

legacy-knowledge-base