Wix Editor X Tutorial: How to Add SVGs

what are svgs why do we use them and how do we add them to our wix editor x projects stick around for the next two minutes while i cover everything you need to know to start adding svgs like a pro all this now svg stands for scalable vector graphic and in short that is exactly what it is a vector graphic that can be scaled up or down in size without losing quality or becoming pixelated or blurry so why or when would we use an svg usually we
default to using jpegs or pngs for our logos and icons but there are some great reasons for using an svg as mentioned before picture quality remains high and will never appear blurry or pixelated when resized all browsers are able to support svgs so your visitors will never have trouble seeing them on your site because svgs are made up of code in wix we can easily change the color of our icons regardless of how they were saved out and finally
they are smaller in file size which is crucial to how fast or slow your page loads so let’s go ahead and add a logo as an svg to this site first i’m going to want to go up to my add elements panel open that up go down to media my uploads and upload media i’m going to click here and then i can upload from my computer by clicking here i already have this file uploaded which is right here i have it as a png and an svg i’m going to select the svg
file click it add to page next i’m going to bring it up here into my header bar then i’m going to resize it and i can open up my inspector and as far as width i’m going to go 300 pixels that looks good and then from the left let’s go five percent and i’m going to align this to the middle looks good let’s go ahead and make sure it looks good on all of our break points so i’m going to go to the next break point over which is this one looks good
there looks good there and then here you can see our phone number button wraps now this is not built in a grid so i’m just going to go ahead and move this up because it is still aligning to the middle of this container so that looks good there and then on the smallest mobile viewport i have it set to 280 250 that looks good there all right i’m going to go ahead and save and then publish and then i’m going to see how this responds all right looks
good now let’s move on to how to add an icon as an svg another cool thing we can do with svgs in wix’s editor x is change their color here you can see that i have four icons that i previously uploaded and these are all svg files i’m going to go ahead and select one of them click on the design icon the color swatch and then as i roll over the colors you can see them change on the icon in real time i’m going to select this color here close out the
menu and then the same color for this icon here to add some contrast another thing we can do with svgs is resize them so with the icon selected in my inspector panel open i’m going to go ahead and show you that you can make this sixty percent and you can make this ten percent and it still keeps its sharpness thirty five percent looks good to me and that is how you add color and resize an svg icon in wix please note you cannot upload an svg using
the image element so here under add elements quick add you have the image element if i were to go ahead and try to do so you can see by selecting svg this button is grayed out only images can be chosen so i’m going to go ahead and close this out i’m going to select my image and delete it then go to add elements and under shape quick add shape i can then add an svg that way or i can go to media my uploads upload media and upload it that way and
there you have it now you can add high resolution and scalable images and icons in your editor x projects to see other wix tutorials please be sure to leave a comment below letting me know if not let me know what you’d like to see next if you like this video please give it a thumbs up if you want to see more videos around this topic or other web design tools concepts and strategies then please subscribe and be sure to hit that bell to be notified
as soon as they are released my name is rich and thank you so much for spending your time with me today i look forward to seeing you next time you