[AEM 6.0] SVG Support for Touch UI Authoring

Disclaimer : Ideas/Implementions provided in this blog express my personal view. Adobe or Me will not be held responsible for damage caused on your system because of information. Please don't try any suggestion in production system without proper testing. This is not an Adobe supported blog

Problem:

In AEM 6.0 authoring (/editor.html) , when you drag an svg asset to an image component, you will see broken image link.

Solution:
Customize AEM foundation image component to render svg assets as well.

You can download the package here

1. Showing SVG in the Touch UI content finder

• Create "cq.authoring.editor.hook.assetfinder" clientlibs in /apps/authoring/clientlibs
• Go to http://localhost:4502/crx/de/index.jsp
• Go to /apps/authoring (if not existing already, create one) and create nt:folder with name 'clientlibs'
• Go to /apps/authoring/clientlibs and create assetfinder (cq:clientLibraryFolder)
• Add property 'categories' with String Multi (String []) and value as 'cq.authoring.editor.hook.assetfinder'
• Create a folder js (nt:folder) inside /apps/authoring/clientlibs/assetfinder
• Create a file 'js.txt' (nt:file) inside /apps/authoring/clientlibs/assetfinder with the content as following:

#base=js
assetfinder.js

• Create a file 'assetfinder.js' (nt:file) in the /apps/authoring/clientlibs/assetfinder/js with the following content

(function(document, $) {

    "use strict";

    $(document).on("cui-gridlayout-layout", function(e) {

        $("article[data-path$='.svg'] img").each(function(i) {

            var $this = $(this);

            $this.attr('src', $this.attr('src').replace(/.svg.thumb.*.png/, '.svg'));

        });

    });



})(document, Granite.$);

2. Showing SVGs in the foundation image component (/libs/foundation/components/image)

• overlay /libs/foundation/components/image in /apps/foundation/components/image
• create /apps/foundation/components/image (every thing is of type nt:folder)
• create image.jsp (nt:file) in /apps/foundation/components/image with the following content

<%@ page import="org.apache.sling.api.resource.ValueMap" %><%
%><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%

%><cq:defineObjects />

<cq:include script="/libs/foundation/components/image/image.jsp"/>

<%ValueMap vm = resource.adaptTo(ValueMap.class);

String fileReference =vm.get("fileReference", "");

if (fileReference.endsWith(".svg")) {

    String divId = "cq-image-jsp-" + resource.getPath();

    String idSelector="[id=\\\""+divId.replace(":","\\:").replace("/","\\/")+"\\\"]";    %>

<script type="text/javascript">

    var s = $(document).find("<%=idSelector%>");

    var img = s.find("img");

    img.attr("src","<%=fileReference%>");

    img.attr('width', s.width());

</script>

<%}%>

3. Now you can see svgs in the content finder and you can drag them to image component as normal images