**SVG is not supported in many email clients. The best guide I’ve seen is on [Style Campaign](http://stylecampaign.com/blog/2014/01/basics-of-svg-in-email/)**. It’s a short read that I vouch for (Anna is super smart!).

TL;DR: A variety of techniques will work in iOS mail clients and (amazingly) Blackberry. But Android, Outlook, and pretty much every other desktop and webmail client does not support SVG and requires a fallback.

Update: &quot;_Microsoft Word, PowerPoint, Outlook, and Excel for Office 365 on Windows, Mac, Android and Windows Mobile **support inserting and editing scalable vector graphics (.SVG)** files in your documents, presentations, emails, and workbooks._&quot; ([_Edit SVG images in Microsoft Office 365_][1])

From the &quot;Insert SVG files&quot; section in the [_Insert icons in Microsoft Office_][2] guide  

&gt; ## Insert SVG files
&gt; 
&gt; SVG stands for scalable vector graphic file, which means you can
&gt; rotate, color, and resize the file without losing image quality.
&gt; Office apps, including Word, PowerPoint, Outlook, and Excel, support
&gt; inserting and editing SVG files.
&gt; 
&gt; * **Insert an SVG file in Office for Windows**: Drag and drop the file from Windows File Explorer into your document.
&gt; 
&gt; * **Insert an SVG file in Office for Mac**: Go to Insert &gt; Pictures &gt; Picture from file to insert your SVG images.
&gt; 
&gt; * **Insert an SVG file in Office on Android or Windows Mobile**: See [Add pictures or videos to a file by using your mobile device][3] for
&gt; more information.


----------

### An example

Needed to convert our non-profit&#39;s logo into SVG to make it look right, so 

  1. looked up an online tool (by googling &quot;png to svg&quot; in my case)

  2. The site generated it, but wouldn&#39;t let me it download if I won&#39;t register.

  3. Opened the SVG image up in the developer console (Chrome: right click on the image and select &quot;Inspect&quot;)

  4. copy the entire `&lt;svg&gt;` tag into a simple text file and save it with `.svg` extension (from [this SO thread][4]).

  5. In Outlook, &quot;*Go to Insert &gt; Pictures &gt; Picture from file to insert your SVG images.*&quot;


  [1]: https://support.office.com/en-us/article/edit-svg-images-in-microsoft-office-365-69f29d39-194a-4072-8c35-dbe5e7ea528c
  [2]: https://support.office.com/en-us/article/insert-icons-in-microsoft-office-e2459f17-3996-4795-996e-b9a13486fa79
  [3]: https://support.office.com/en-us/article/add-pictures-or-videos-to-a-file-by-using-your-mobile-device-4d34d45d-8ab0-4950-82cc-76c2375a1fb8
  [4]: https://stackoverflow.com/questions/12628968/how-can-i-save-svg-code-as-a-svg-image

Import file as attachment in ProtonMail, send to self, then download. Never had any issues with it.

Currently, all of my project files are indented with 4 spaces. I want to change that to 2 spaces as my organization uses 2 as an standard, but can&#39;t find any answers.

Intellij: Change project indent from 4 spaces to 2 spaces

I understand that `$Broadcast()`, `$Emit()` And `$On()`  are used to raise an event in one controller and handling in another controller. If possible, can someone just give me some real time example on the usage of above three as I am new to `angular JS`?

I have gone through the following links and understand the basic usage.

http://www.binaryintellect.net/articles/5d8be0b6-e294-457e-82b0-ba7cc10cae0e.aspx

Usage of $broadcast(), $emit() And $on() in AngularJS

I want to generate graphs in SVG, and email an HTML page with those graphs embedded in it (not stored on a server and shown with linked images). 

I&#39;ve tried directly embedding the SVG, using the Object element, and serializing and URI encoding the SVG and specifying the whole string as a background image on a div. Nothing seems to display in Outlook 2013. Any ideas?

How can I embed SVG into HTML in an email, so that it&#39;s visible in most/all email browsers?

<p>I want to generate graphs in SVG, and email an HTML page with those graphs embedded in it (not stored on a server and shown with linked images).</p>
<p>I've tried directly embedding the SVG, using the Object element, and serializing and URI encoding the SVG and specifying the whole string as a background image on a div. Nothing seems to display in Outlook 2013. Any ideas?</p>


How can I vertically center text that is wrapped in a `&lt;span&gt;`? The `&lt;span&gt;` must have `min-height` of `45px`. Here is what I am envisioning:

    --------                  -------
    text
    
                    ---&gt;      text   


    --------                  -------

I tried `vertical-align` as well as methods from this [article][1]. None of them worked


  [1]: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

How to vertically center text in a &lt;span&gt;?

Below are two rows.
 
 - **First row** is two items at `flex 1` and one at `flex 2`.

 - **Second Row** is two items at `flex 1`.

According to the spec **1A + 1B = 2A**

But when **padding** is included in the calculation the sum is incorrect as you can see in the example below.
___
**QUESTION**

How to get flex box to include padding into its calculation so the boxes in the example line up correctly?

&lt;!-- begin snippet: js hide: false console: true --&gt;

&lt;!-- language: lang-css --&gt;

    .Row{
      display:flex;
    }
    .Item{
      display:flex;
      flex:1;
      flex-direction:column;
      padding:0 10px 10px 0;
    }
    .Item &gt; div{
      background:#7ae;
    }
    .Flx2{
      flex:2;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;Row&quot;&gt;
      &lt;div class=&quot;Item&quot;&gt;
        &lt;div&gt;1A&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;Item&quot;&gt;
        &lt;div&gt;1B&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;Item Flx2&quot;&gt;
        &lt;div&gt;1C&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;Row&quot;&gt;
      &lt;div class=&quot;Item&quot;&gt;
        &lt;div&gt;2A&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;Item&quot;&gt;
        &lt;div&gt;2B&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to get flexbox to include padding in calculations?

Alright, I&#39;m creating a system for my webpage that allows users to change the theme. How I want to accomplish this is by having all the colors as variables, and the colors are set in the :root part of the CSS.

What I want to do is change those colors via JavaScript. I looked up how to do it, but nothing that I attempted actually worked properly. Here&#39;s my current code:

CSS:

    :root {
      --main-color: #317EEB;
      --hover-color: #2764BA;
      --body-color: #E0E0E0;
      --box-color: white;
    }

JS:

(Code to set the theme, it&#39;s ran on the click of a button) - I didn&#39;t bother adding the :root change to the other 2 themes since it doesn&#39;t work on the Dark theme

    function setTheme(theme) {
      if (theme == &#39;Dark&#39;) {
        localStorage.setItem(&#39;panelTheme&#39;, theme);
        $(&#39;#current-theme&#39;).text(theme);
        $(&#39;:root&#39;).css(&#39;--main-color&#39;, &#39;#000000&#39;);
      }
      if (theme == &#39;Blue&#39;) {
        localStorage.setItem(&#39;panelTheme&#39;,  &#39;Blue&#39;);
        $(&#39;#current-theme&#39;).text(&#39;Blue&#39;);
        alert(&quot;Blue&quot;);
      }
      if (theme == &#39;Green&#39;) {
        localStorage.setItem(&#39;panelTheme&#39;, &#39;Green&#39;);
        $(&#39;#current-theme&#39;).text(&#39;Green&#39;);
        alert(&quot;Green&quot;);
      }
    }

(Code that is ran when the html &lt;body&gt; is loaded)

    function loadTheme() {
      //Add this to body onload, gets the current theme. If panelTheme is empty, defaults to blue.
      if (localStorage.getItem(&#39;panelTheme&#39;) == &#39;&#39;) {
        setTheme(&#39;Blue&#39;);
      } else {
        setTheme(localStorage.getItem(&#39;panelTheme&#39;));
        $(&#39;#current-theme&#39;).text(localStorage.getItem(&#39;panelTheme&#39;));
      }
    }

It shows the alert, but does not actually change anything. Can someone point me in the right direction?

How to change CSS :root color variables in JavaScript

I am using gravatars and it&#39;s rather often when I downscale them with css, and I believe Google Chrome used to do it properly until recently ( I may be wrong, not sure when exactly the problem started to occur ) but now, images get blurred when downscaled, and that happens only in Chrome, FF downscales pretty good. I tried using `image-rendering` but it doesn&#39;t solve the problem. Can someone give me a hint what is the best way to go about it?

The example can be found [here][1], open it in Chrome and then in FF, it should be way more blurred in Chrome than in FF.

Thank you


  [1]: https://jsfiddle.net/6Lsz62cp/1/

Blurry downscaled images in Chrome

I am using the &amp;nbsp tag in jsx and it is not rendering the space. The following is a small snippet of my code.Please help.

    var Reporting=React.createClass({

      render: function(){
        return(
          &lt;div style={divPositionReporting}&gt;
              &lt;p&gt;Pricing Reports&lt;/p&gt;
              &lt;hr&gt;&lt;/hr&gt;
              Select Scenario:&amp;nbsp;&amp;nbsp;
              &lt;select&gt;
                &lt;option&gt;&lt;/option&gt;
              &lt;/select&gt;
              &lt;button type=&quot;button&quot;&gt;Get Pricing Report&lt;/button&gt;
              &lt;br/&gt;
              Select Takeout Scenario:&amp;nbsp;
              &lt;select&gt;
                &lt;option&gt;&lt;/option&gt;
              &lt;/select&gt;
              &lt;button type=&quot;button&quot;&gt;Get Pricing Report&lt;/button&gt;
              &lt;br/&gt;
          &lt;/div&gt;
        );
      },

    });
	


&amp;nbsp jsx not working

I&#39;ve got an SVG file and I want to make an SvgIcon component out of it, how should I do that?

In the [documentation][1], all the examples use either predefined Material Icons or a strange notation of `&lt;path d=&quot;M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z&quot; /&gt;` which I have no idea what it is!


  [1]: http://www.material-ui.com/#/components/svg-icon

How to use an SVG file in a SvgIcon in Material-UI

I want to show svg files (I have bunch of svg images) but the thing I couldn&#39;t find the way to show. I tried to use **Image** and **Use** components of **[react-native-svg][1]** but they don&#39;t work with that. And I tried to do that with native way but it&#39;s really hard work to show just svg image.

Example code:

    import Svg, {
      Use,
      Image,
    } from &#39;react-native-svg&#39;;

	&lt;View&gt;
      &lt;Svg width=&quot;80&quot; height=&quot;80&quot;&gt;
         &lt;Image href={require(&#39;./svg/1f604.svg&#39;)} /&gt;
      &lt;/SvgRn&gt;
    &lt;/View&gt;

Also I know the react native doesn&#39;t support svg basically but I think someone fixed this problem with tricky way (with/without react-native-svg)

  [1]: https://github.com/magicismight/react-native-svg

How to show SVG file on React Native?

# HTML

&lt;!-- language-all: lang-html --&gt;

    &lt;div id=&quot;hero&quot;&gt;
       &lt;div id=&quot;social&quot;&gt;
          &lt;img src=&quot;facebook.svg&quot;&gt;
    	  &lt;img src=&quot;linkedin.svg&quot;&gt;
    	  &lt;img src=&quot;instagram.svg&quot;&gt;
    	&lt;/div&gt;
    &lt;/div&gt;

# CSS using SASS
&lt;!-- language-all: lang-css --&gt;

    #hero {
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    	height: 300px;
        
    	#social {
    		width: 50%;
    		display: flex;
    		justify-content: space-between;
    		flex-wrap: wrap;
    
    		img {
    			width: 2em;
    		}
    	}
    }
I’m not able to resize SVGs using the CSS `width` property. Here is what I obtain with different approaches (note how icons collapse toward the middle of the `hero` `div`):

`img { width: 2em; }`

[![enter image description here][1]][1]

`img { width: 3em; }`

[![enter image description here][2]][2]

`img { width: 4em; }`

[![enter image description here][3]][3]

However, if I use the CSS `height` property:

`img { height: 2em; }`

[![enter image description here][4]][4]

`img { height: 3em; }`

[![enter image description here][5]][5]

`img { height: 4em; }`

[![enter image description here][6]][6]

I get the behaviour I need, but I’m not sure this is the right way. Why does this happen? Do you know better ways of resizeing SVG images (especially using the [Flexible Box Module](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox))?

  [1]: http://i.stack.imgur.com/7fIsb.png
  [2]: http://i.stack.imgur.com/7iw0h.png
  [3]: http://i.stack.imgur.com/Pbceu.png
  [4]: http://i.stack.imgur.com/n10yp.png
  [5]: http://i.stack.imgur.com/B25nT.png
  [6]: http://i.stack.imgur.com/xcH8V.png

Why don’t SVG images scale using the CSS “width” property?

I&#39;ve just run into a very weird problem that only shows up in Safari 10. I have playing cards, svg images, that are sometimes rotated using `transform:rotate(xdeg)`.

The card I&#39;m using has a red block pattern. When it&#39;s not rotated, or rotated at right angles, i.e. 90, 180, 270, then it looks normal. But, any other angle than that and the background pattern turns blue! I just got a report about this from one of my users and have never seen anything as weird. Other browsers all work normally, Safari 9 does it normally.

I&#39;m guessing this is just a really weird bug in Safari 10, but any ideas about how to work around it? I&#39;ve created a minimal repro at:

https://jsfiddle.net/2zv4garu/1/



SVG changes color when rotated in Safari 10

I&#39;m trying to load an external svg file and then write additional SVG elements on top of it. When I do, I get the following  error

&gt; Failed to execute &#39;appendChild&#39; on &#39;Node&#39;: Only one element on document allowed

when I inspect within Chrome.

Here&#39;s the HTML:

    &lt;html&gt;
      &lt;head&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/index.css&quot;&gt;
        &lt;title&gt;Hello World&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; id=&quot;mySvg&quot;&gt;
            &lt;circle cx=&quot;40&quot; cy=&quot;30&quot; r=&quot;15&quot; fill=&quot;#FF00FF&quot;
              stroke=&quot;#000000&quot; stroke-width=&quot;2&quot; /&gt;
          &lt;/svg&gt;
          &lt;object data=&quot;img/drawing.svg&quot; type=&quot;image/svg+xml&quot;
            align=&quot;center&quot; id=&quot;svgDrw&quot; height=&quot;80vh&quot;&gt;&lt;/object&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;js/problem.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt;

Here&#39;s problem.js:

    var svgXtraDoc;
    var d = document.getElementById(&quot;svgDrw&quot;);
    
    d.addEventListener(&quot;load&quot;,function(){
    
      // get the inner DOM 
      svgXtraDoc = d.contentDocument;
      // get the inner element by id
      svgRect1 = svgXtraDoc.getElementById(&quot;MyRect1&quot;);
      svgRect2 = svgXtraDoc.getElementById(&quot;MyRect2&quot;);
    }, false);
    
    
    function addRect() {
      var svgRect = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, 
        &quot;rect&quot;);
      svgRect.setAttribute(&quot;x&quot;, 100);
      svgRect.setAttribute(&quot;y&quot;, 100);
      svgRect.setAttribute(&quot;width&quot;, 100);
      svgRect.setAttribute(&quot;height&quot;, 100);
      svgRect.style.fill = &quot;red&quot;;
      // mySvg.appendChild(svgRect);
      svgXtraDoc.appendChild(svgRect);
    }
    
    document.getElementById(&quot;mySvg&quot;).addEventListener(&quot;click&quot;, addRect);

... and here&#39;s drawing.svg, stripped of some of the Inkscapy cruft:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
    &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt;
    
    &lt;svg
       xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot;
       xmlns:cc=&quot;http://creativecommons.org/ns#&quot;
       xmlns:rdf=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;
       xmlns:svg=&quot;http://www.w3.org/2000/svg&quot;
       xmlns=&quot;http://www.w3.org/2000/svg&quot;
       width=&quot;29.02857mm&quot;
       height=&quot;37.092064mm&quot;
       viewBox=&quot;0 0 102.85714 131.42857&quot;
       id=&quot;svg2&quot;
       version=&quot;1.1&quot;&gt;
      &lt;g
         id=&quot;layer1&quot;
         transform=&quot;translate(-205.71428,-218.07649)&quot;&gt;
        &lt;rect
           style=&quot;stroke:none;fill-opacity:1;fill:#5eb056&quot;
           id=&quot;MyRect1&quot;
           width=&quot;102.85714&quot;
           height=&quot;131.42857&quot;
           x=&quot;205.71428&quot;
           y=&quot;218.07649&quot; /&gt;
        &lt;rect
           style=&quot;fill:#000000;stroke:none;fill-opacity:1&quot;
           id=&quot;MyRect2&quot;
           width=&quot;42.857143&quot;
           height=&quot;65.714287&quot;
           x=&quot;231.42857&quot;
           y=&quot;252.3622&quot; /&gt;
      &lt;/g&gt;
    &lt;/svg&gt;


The error arises when you click on the circle: the rectangle that should appear within the two-rectangle imported drawing doesn&#39;t appear, and the error message &quot;Failed to execute &#39;appendChild&#39; on &#39;Node&#39;: Only one element on document allowed.&quot; is displayed in the console.

If I change this so the rectangle is added to the svg containing the circle, i.e. by uncommenting the line &quot;// mySvg.appendChild(svgRect);&quot;, then the rectangle successfully appears.

I also know that the drawing file is successfully loading, because in other code (not included here for brevity reasons) I can change the colors of the rectangles within that file. So it seems that I can access existing elements within the file but not add elements.

Is there something about externally loaded SVGs versus inline SVGs that I&#39;m not taking into account?

One last thing -- this is going into a Cordova app so I&#39;d like to keep it small, so pure JavaScript solutions are preferred. I&#39;ll use JQuery or SnapSVG if I have to but it seems my needs are sufficiently simple that it should be possible to do this without external libraries.

Content Type	Original Author	Original Content on Stackoverflow
Question	ztforster	View Question on Stackoverflow
Solution 1 - Html	Ted Goas	View Answer on Stackoverflow
Solution 2 - Html	toraritte	View Answer on Stackoverflow
Solution 3 - Html	OPM	View Answer on Stackoverflow

How can I embed SVG into HTML in an email, so that it's visible in most/all email browsers?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

An example

Solution 3 - Html

Usage of $broadcast(), $emit() And $on() in AngularJS

Intellij: Change project indent from 4 spaces to 2 spaces

Attributions