Knowledge
<3
VIP
Retired
So in Photoshop you are able to export things as an .svg format. For those of you who are unaware of what a .svg is, svg stands for Scalable Vector Graphics. This means that the graphic you make can scale with no bluring because it uses vector rather than raster to display the image (that's a completely different tutorial and I'll make that soon).
So to start with, make a canvas in Photoshop. Doesn't matter what size to begin with so I'll go with 500px by 500px.
From there, delete the background layer (if you have one), grab the type tool "T" and type out what you want. In this case I'll just use the number seven.
From here right click on your type layer and click on "Convert to Shape" (highlighted in blue). From here, you will no longer be able to edit what the type says, so make sure to this after you're happy with what it says.
Once you've done that your type layer will be turned into a shape layer, and is now a vector graphic, rather than a raster one.
From here you have a few options:
With this menu you are able to save your SVG in multiple sizes with the suffix of your choice.
This is where you will set it to output as an SVG. The drop down menu offers PNG, JPG, GIF and SVG (svg is the one you want for this).
Allows you to alter the size of your image. Because we're working in vector graphic you can make this as big or as small as you want.
With this you can crop your canvas to better suit your image. If you wanted to do this I'd use the crop tool as you get better control over it, rather than messing with a few numbers.
Used to store information in the image. Generally I leave this on None because I have no need for this...
If you want better information on the different options then head to this link.
Once you have everything set up how you're happy with it then click on the Export All button at the bottom and save it.
Here is an example of a vector graphic for you to play with (zoom in and out and you'll notice that the edges don't blur at all as you do so, while regular raster images will blur because of you zooming in.
So to start with, make a canvas in Photoshop. Doesn't matter what size to begin with so I'll go with 500px by 500px.
Before.
After.
Now to save the svg. Before saving, make sure that you have only the vector (shape) layers in your PSD. If you have any layers that are not vector (shape) layers in your PSD this will not be a vector! Once you've done that, go to "File > Export > Export as..." This will bring up the following window.After.
With this menu you are able to save your SVG in multiple sizes with the suffix of your choice.
This is where you will set it to output as an SVG. The drop down menu offers PNG, JPG, GIF and SVG (svg is the one you want for this).
Allows you to alter the size of your image. Because we're working in vector graphic you can make this as big or as small as you want.
With this you can crop your canvas to better suit your image. If you wanted to do this I'd use the crop tool as you get better control over it, rather than messing with a few numbers.
Used to store information in the image. Generally I leave this on None because I have no need for this...
Once you have everything set up how you're happy with it then click on the Export All button at the bottom and save it.
Here is an example of a vector graphic for you to play with (zoom in and out and you'll notice that the edges don't blur at all as you do so, while regular raster images will blur because of you zooming in.