sap.m.Image src=*.svg support

Hi guys, i am currently using svg images as Image sources.

To be able to apply styling via css the external svg needs to be converted as inline svg.

Currently this is a work in progress and i do something like

        jQuery('.svg-inject .sapMImg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr("id");
            var imgDataSapUi = $img.attr("data-sap-ui");
            var imgRole = $img.attr("role");
            var imgAriaHidden = $img.attr("aria-hidden");
            var imgClass = $img.attr("class");
            var imgStyle = $img.attr("style");
            var imgURL = $img.attr("src");

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find("svg");

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== "undefined") {
                    $svg = $svg.attr("id", imgID);
                }
                if(typeof imgDataSapUi !== "undefined") {
                    $svg = $svg.attr("data-sap-ui", imgDataSapUi);
                }
                if(typeof imgRole !== "undefined") {
                    $svg = $svg.attr("role", imgRole);
                }
                if(typeof imgAriaHidden !== "undefined") {
                    $svg = $svg.attr("aria-hidden", imgAriaHidden);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== "undefined") {
                    $svg = $svg.attr("class", imgClass + " svg-inline");
                }
                // Add replaced image's styles to the new SVG
                if(typeof imgStyle !== "undefined") {
                    $svg = $svg.attr("style", imgStyle);
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr("xmlns:a");

                // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
                if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
                    $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
                }

                // Replace image with new SVG
                $img.replaceWith($svg);
            }, 'xml');

There are also more experienced libs like https://github.com/robbue/jquery.svgInject availbale, which uses an inline cache for replacing img with svg.

This is only a WIP but still works. I just started to thing (and learn) about using SVG. Using it this way, the image will be replaced by an inline svg object.

You also need densityAware = false because svg is a vector and src should not load @2.svg

It would be great, if such feature could be integrated into the sap.m.image, maybe with an inline option by default to be able to use such SVGs also in the sap.m.ObjectHeader.

We use this feature inside out theme for company logo’s, where the external src is ok.

Using SVGs as user placeholder images we like to control the fills, strokes, etc with colors inside our custom specific theme using $BaseColor, $AccentColor and such SVGs needs to be replaced as inline object svg.

What do you thing?

Regards, Holger

[flovogt]

This issue was covered in backlog BGSOFUIPIRIN-5679 and implemented with https://github.com/SAP/openui5/commit/d459de2f3a44e76d7f608cf58b10cfd646185c91.

[ManuelB]

@jdichev we used an svg map from germany with all federal states. They were clickable.