Open SVG File

Information, tips and instructions

SVG in Social Networks

What is an SVG file?

SVG or Scalable Vector Graphics is a web standard for defining vector-based graphics on web pages.

SVG is based on XML, the standard provides markup to describe paths, shapes, and text within a viewport.

Markup can be embedded directly into HTML for display or saved to an SVG extension file and inserted like any other image.

You can write SVG by hand, but more complicated graphics can be designed in vector graphics editors like Illustrator or InkScape and exported to SVG files or code.

But, what is the role of an SVG in Social Networks?

If you use HTML5, you can now replace the images of social networks that we use in the share buttons on your pages, with SVG images that load at full speed in the web browser.

SVG images do not need to be used as external files, because they consist of just code embedded in the page, which is rendered and displayed by the browser at full speed.

They are scalable and do not lose quality, which can be seen by zooming in on this page.

This makes our social networking site much faster and the pages easier to load.

Vector icons are used on the index page of the site, to link the social networks where we participate and make it easy for visitors to follow us.

Icons and logos of the main internet social networks

The icons shown below are in SVG format.

To use them, you only need to copy the code and paste it into the HTML code of a page, in the exact place where you want to display it.

Facebook Logo SVG Image

Code:

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><path fill="#3B5998" d="M0 0h32v32H0z"/><path fill="#FFF" d="M22.08 32V19.607h4.16l.62-4.83h-4.78v-3.083c0-1.398.388-2.352 2.393-2.352h2.56V5.02c-.443-.058-1.962-.19-3.728-.19-3.688 0-6.213 2.25-6.213 6.385v3.562h-4.17v4.83h4.17V32h4.987z"/></svg>    

Twitter Logo SVG Image

Code:

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><path fill="#55ACEE" d="M0 0h32v32H0z"/><path fill="#FFF" d="M28 8.557c-.884.39-1.833.656-2.828.775 1.017-.608 1.798-1.573 2.166-2.725-.953.567-2.006.976-3.13 1.194-.896-.956-2.176-1.554-3.593-1.554-2.72 0-4.924 2.206-4.924 4.925 0 .387.045.763.13 1.125-4.094-.208-7.724-2.168-10.15-5.147-.423.726-.667 1.573-.667 2.476 0 1.71.87 3.214 2.19 4.1-.806-.027-1.564-.25-2.23-.616v.06c0 2.39 1.7 4.378 3.952 4.83-.414.113-.85.172-1.297.172-.317 0-.625-.03-.927-.086.63 1.956 2.447 3.38 4.6 3.42-1.685 1.318-3.808 2.107-6.114 2.107-.398 0-.79-.023-1.175-.068 2.18 1.396 4.768 2.213 7.55 2.213 9.056 0 14.01-7.506 14.01-14.012 0-.213-.005-.426-.015-.637.96-.694 1.795-1.56 2.455-2.55z"/></svg>    


Get more information about how to open SVG file.

Also check how to:

If you are not able to open file with certain file extension make sure to check if extension for the file is correct. It is possible that information in the file doesn't match file extension.