What are the layout methods for working with SVG graphics?

Question

User interface

Good day to all.
Perhaps the question will seem general, but I'll forgive you and I want advice from layout professionals.
Many now interface elements in web layout are made using svg elements: icons, pictures, vector graphics, buttons, menu items ... It’s actually interesting how to work more correctly, or rather, what principles are more correct with SVG graphics when laying out a project ? How is SVG connected, do you need any libraries or is it already automatically built into browsers? Help on svg-layout to ask right here ...

Answer 1

The smartest and most widely supported way is svg sprites via xlink:href (look for an article on Habré).
The idea is that you take 100 small svg files and push them into one big one, marking individual fragments with identifiers.
This file is loaded with a single XHR request and inserted into the DOM, after which you can do

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my-cool-icon"></use>
</svg>

This method has a nice plus - sprites can be recolored via css. By dodging, you can even paint in two different colors (such as one element in red, the other in blue), which is impossible with icon fonts.
Using css as background-image won't work.

Answer 2

I will add about the svg sprite, you can not insert the sprite into the markup, but put it in the img/sprite.svg folder (for support in all ie and old browsers you will need https://github.com/jonathantneal/svg4everybody) then the file will be cached in the markup icon will be called

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite.svg#icon"></use>
</svg>

In addition to sprites, svg is inserted inline into the markup code, you can style both the entire svg, and its individual and grouped parts - path
Decorative transitions between blocks are often made on svg (triangular oblique, for example - tympanus.net/codrops/2013/10/03 /a-collection-of-se... )
Svg is convenient because it is ideal for responsive sites, because this is a vector format
In a nutshell, I can’t tell everything - it’s better to read these collections on the topic svg:
https://css-tricks.com/mega-list-svg-information/
https://sarasoueidan.com/tags/svg/

Answer 3

https://www.youtube.com/watch?v=S0OnkpIoEyQ

Answer 4

Here is a very good article: https://24ways.org/2014/an-overview-of-svg-sprite-... (if you are friends with English). And it is good not for its content, but for the "PREREQUISITES" section: it contains several articles for "beginners". Run through them and everything will become much clearer.

Answer 5

You just convert the file to SVG and insert this code into the page and that's it - the picture was a file, the picture became a code. This reduces the number of round trips to the server when the page is loaded. Icons, logos can be converted to SVG. You can make them grow and shrink as the browser resizes.
avacode Able to save pictures in Svg. You save in base64
I can if you want to show an example. The picture of the social network icon is inserted directly into the style in the svg format
#social-fb {
display: inline-block;
width: 32px;
height: 32px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw / eHBhY2tldCBiZWdpbj0i77u / IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 +dGFuY2VJRD0ieG1wLmlpZDowMUI1MjY1RkJENkIxMUU0OTEzQUEyQTJFM0MwQ0NGQiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Rjc3RjExNzQwNzIwNjgxMTg3MUY4REJDRTNBN0M4MjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMTgwODNFQjgzQzYyQkQ3QzEiLz4gPC9yZGY6RGVzY3JpcHRpb24 + IDwvcmRmOlJERj4gPC94OnhtcG1ldGE + IDw / eHBhY2tldCBlbmQ9InIiPz7kIhX5AAADhUlEQVR42sxXTWgTQRh9M / sT89u0ta3FCipIRfAiqYKgIHrTmzcV1ItWxIOnHq2Xgh70oFJBREUUPVgEqQcRFEEPUhQED6UgQltSa9u0aZpkd7OzfrOx1ZhsyTbGOrDZJPNN3pvve9 + bDXMcB6s5VPlydTCDB3funqC3Z + jaWWfM93T1Hz154u75gxEwmYHE4WsXWtvbe3ckEmhuWVtX9OnvU / gwNITJZLJ36Mm5i24GwHCma / deGHYAo98KdSWga42QWIMDj2W2fxIAa8sYOmxRfz3kTQcW113MJQ3IUbBrB5d6liUt3n9ujS1ezL0Xsf4Q4eLiWoBt2sCCAcxkBNJZAdMCOAHqtNlYiKM5xhHWf5EoIyDEysFlWpMpgZlZgUOJIBJbdDREuDs / PGYhV3DwbCiHjS0cnDMPAs7KwA3LwVcS7tY2HbfPxRAN8ZKY7Zs1jIwVcP / 1AuxmLgXvlQH / DOSaKdr1upCCy6finnGjkwUwipXx3iVYQQYsElNyWuBGd3zZuLEpG + Egh1MBpyYNSKHZeWDbJq3k ++ fvsuh / mgGjjOsEzDUH8QijkrEynBWXQNbfNAWCavm6 / oE0HFJ / Q5xDpXldZdBUttSif6UExdYDlD + LKvtcMDQReCzCSvq / EobvEiyajYw3Tadi5mifKFB3mCZ5Af9lRJwvR6BKJ5KOmZoTmJi0kZqx0dFY / qvCtPHps4nAGgWKAkTJhNpbFcTC3LsLnCozYJDoFIvj7bU2z5gX19eXfJ6YtnG07zsiGygLSg1GJJNkkaulM / 4E8zVZQN5w4B43tbShJODG + RTsF7JjXS2u9S5BlRqQVh4J + SMgrTocYhVxfJ + GGnlOljnYdXoccykSYRPHy5sdJTEHuscwSnWXIgwEGBpJqM1NSkUc3z7AKAUNDRzRKMf8PEd + tnwhVzk6OxVEwsXTj / FiGzrLEah2 / P5woarFH69EUs6pWnnblZHFKo + lDMyOf / BpxQ6yWRNKoKvifDr5HoWQ7marKgJnj + 3xfRbMU2 / fepSuON99fD + iAeZZgr4rI6UE5nPCN4G5vLdy5 + i5EIL9 / xrgxd2IiZwp /hmoxJKYSwRsc+Hem7cf6em2/iQkhsSSmG7LSjXrgUCkc1/PJS3YeIQrWryeBIRtzVq51MPhV5d6TMPILBKQPhmkKyr/vqHs4fmvDalaU2rerYRh2D8EGAAgFp1Ic+BRBAAAAABJRU5ErkJggg==') center no-repeat
}
It's just that there can be dozens of icons, and for each one, sending a request to the server for loading is expensive. But big heavy pictures are possible. There won't be many of them. And SVG increases the file size.

Answer 6

For me, the easiest thing to do today is to use a font.

Answer 7

tell me later after what period of time you will return to using png)) I can’t say anything bad about the usefulness and rationality of using svg. but, when you are going to test cross-browser compatibility, pay attention to how safari works with svg, more precisely, how it does not work in its own way.
in general, the more communication with apple software, the greater the feeling that their policy - dance to our tune and don't look at the rest, well, that is. sometimes it seems that you need to write absolutely individual implementations for them)

Answer 8

Why not just build a sprite from .svg like we do with normal .png?

Answer 9

you here .

Answer 10

Well .. is it written in your controller? If there are no POST parameters, then throw an error, right? When you go to the payment page, you don't immediately send POST data, do you? Here the controller following your logic also swears.
Or where and by whom action getResult twitches?

Answer 11

Check POST via print_r and see if it's empty or not, if empty then following your logic it throws an error if not empty then var_dump(debug_backtrace()); to help you, catch the error.