+ Start a Discussion
Matty BMatty B 

Lightning Design System and SVG4Everybody

Hi all,
in the LDS tutorial it talks about SVG4everyrbody to support SVG in IE. However it doesn't cover how to do this for Lightning Components with the Aura syntax. How do we alter the HTML and HEAD in a lightning app? I have seen some things showing jQuery and .append syntax but can't find a full tutorial on how to really set it up and what I am trying is still not rendering the SVG component.

Here is the beginning of my Lightning Component and including the svg4everybody:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="public" controller="CustomerCommunityCustomHeaderController">

  <ltng:require scripts="/resource/svg4everybody/svg4everybody-master/dist/svg4everybody.js" styles="/resource/SLDS0121/assets/styles/salesforce-lightning-design-system-ltng.css" afterScriptsLoaded="{!c.doInit}" />   

then in my controller I have the doInit method for which I saw something similar online. when I see $ is that jQuery here? are we really saying I know need to load in jQuery? still couldnt get it to work even with that.

    doInit: function(component, event, helper) {      
      // add meta-http-equiv to the <head>
      $('head').append('<meta http-equiv="x-ua-compatible" content="ie=edge">');
      // start the svg4everybody helper
      $('body').append('<script>svg4everybody();</script>');  
    }