Svg and his friends. What's wrong with him?

Question

Google Chrome

Good day.
They recently threw me a .psd layout. There is a "Vector smart object" element in it, I exported it as .svg and tried to use it in layout.
if you set it like this: or like this - it is not visible (by an external link too). If you throw it through an object
<img src="img/v.svg" alt="">
background-image: url("img/v.svg");

<div id="ObjectTag">
      <object type="image/svg+xml" data="img/v.svg">
      Your browser does not support SVG.
    </object>
    </div>
    <img src="img/v.svg" alt="">

You can see both the first and second options (img).
In Chrome and Opera - it is not visible, in Mozilla - it is visible.
If you open only it in a new link - everything is ok with it.
Apparently, the problem is in it, the mb somehow "on purpose" must be saved in Photoshop.
Climbed the specifications, but so far by.
Who faced?
Himself .svg

Answer 1

I ran into the same problem as you, and by trial and error I figured out what was wrong. You are right, svg from Photoshop needs to be "specially" saved. The simplest shape/vector fsh exports crookedly. But if you just copy the SVG code of the layer, create a .svg file, and then throw the copied code into it, then everything works perfectly.
By the way, this method works great even when the forms are given some overlay options.

Answer 2

<svg class="icon icon-vk">
  <use xlink:href="img/sprite.svg#icon-vk"></use>
</svg>

The img folder contains the sprite.svg file

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-vk" viewBox="0 0 24 24">
    <path class="st0" d="M13.162 18.994c.609 0 .858-.406.851-.915-.031-1.917.714-2.949 2.059-1.604 1.488 1.488 1.796 2.519 3.603 2.519h3.2c.808 0 1.126-.26 1.126-.668 0-.863-1.421-2.386-2.625-3.504-1.686-1.565-1.765-1.602-.313-3.486C22.864 8.997 25.22 6 23.136 6h-3.981c-.772 0-.828.435-1.103 1.083-.995 2.347-2.886 5.387-3.604 4.922-.751-.485-.407-2.406-.35-5.261.015-.754.011-1.271-1.141-1.539A8.07 8.07 0 0 0 11.148 5c-2.273 0-3.841.953-2.95 1.119 1.571.293 1.42 3.692 1.054 5.16-.638 2.556-3.036-2.024-4.035-4.305C4.976 6.426 4.902 6 4.042 6H.787C.295 6 0 6.16 0 6.516c0 .602 2.96 6.72 5.786 9.77 2.756 2.975 5.48 2.708 7.376 2.708z"/>
</symbol></svg>

In sprite.svg we add other icons (we add one more symbol

<svg>
  <symbol id="icon-vk"></symbol>
  <symbol id="icon-instagram"></symbol>
  ...
</svg>

. Use exactly the same. Just change the id.
ps and more. It is necessary to raise the server so that icons are displayed in chrome, opera in this way (in firefox they will always be displayed correctly). Because chrome gives an error
Unsafe attempt to load URL .../img/sprite.svg#icon-vk from frame with URL .. .page.html 'file:' URLs are treated as unique security origins. , which can be resolved by allowing XMLHttpRequests. Here you can find the solution https://github.com/jonathantneal/svg4everybody/iss...
or insert it inline. Then there will be no error and will be displayed