How can I use photoshop's svg exports for raster images, and why won't it show in dropbox. (I'm not a web designer, just a designer trying to understand)

[BaoziXiu]

Hi

I'm a designer/illustrator for an upcoming website that essentially lets people customize personal gifts with the illustration assets I make. At the time of this start up I was using photoshop to make "fine art" like creations, so digital paintings, images with charcoal and pencil textures, watercolor/ink, ect. These images have to retain quality to be printed on to a 48x72 sized canvas. Halfway through my production I was asked to stop exporting as pngs because they are too large for the site and switch to svgs.

As most of my work is raster, I'm confused on what to do.

When I would export my images as SVGs in Photoshop they refused to open in Dropbox for my employer and the web designer to use. They won't preview and apparently not open when uploaded to the site. I'm 110% no one who informed me of the switch ie my boss actually understands or knows what an svg is so they're looking to me for answers that I do not have because I'm not familiar with the format either except when dealing in Illustrator.

I've since attempted to image trace all my images which sucks because they of course don't look nearly as pristine as 'artsy' as before.

Can someone please explain to  me how I can retain the print quality of the image but export  the raster images as svgs that can be uploaded to the Dropbox without any issues?

Again I'm not a web designer so please go easy on me with the jargon.

[Test Screen Name]

If they want to to reduce the size by going to SVG they are also telling you to throw away your work and switch to raster design. You cannot use it to reduce the size of a raster (indeed it will increase). If they want to pay you to start again, perhaps that's ok...

[Test Screen Name]

Sorry, I meant to write "switch to vector design". Don't suppose I can blame autocorrect for that...

[BaoziXiu]

Unfortunately I'm just a contracted worker so although they've wasted my time, I will not be re compensated since I'm paid on a weekly basis. They are having me image trace everything which is a bigger waste because image trace just doesn't always come out a splitting image.

[JJMack]

Why do you need it to be saved as an SVG file.  If it is a raster image in Photoshop your Photoshop document Photoshop has no vector information for your document's image raster layers. These are not vector layers like shapes and text,  What does saving a raster image in a vector SVG file buy you the file will not contains any vector information for the image. A vector free vector file what's the point of having such a file. It can not be resized with vector tools resizing must be done via interpolation and image quality will suffer.

For a good quality print you need the required number of high quality pixels.  You do not want to interpolate if at all possible you want to use the best pixels you have for you image.  The image should be worked on the size you need and saved that way with the pixels you worked on,

[BaoziXiu]

I am both a raster and vector artist but when I was brought on it's my raster art that she liked, because it has the hand drawn/fine art touch that vector tends to lack in. But she, not being tech savvy in the slightest, is now frustrated the images aren't showing in svg saved photoshop and 'how long' the process has taken for me to get my images together. Even though when I was hired, I was hired to export them out as pngs not svgs and now must image trace over 3000+ raster images and photoshop exported svgs.

None of it makes sense to me either; I'm not strong in web but I feel like there has to be another way?? A vector designer who is no longer on the team was the one who suggested svgs, the web developer has been pretty silent about everything.

How are places able to post multiple png files that are small enough that they don't drag the server down but is also able to retain the quality for large scale printing?

[rayek.elfin]

A bit more clarification is required here.

1. do the images have to be provided at print resolution on the server?
2. since most of your work is hand drawn, wouldn't high-quality JPGs work? Why PNG?

Would you be able to share an example with us? Is the site already online for us to see?

There are ways to optimize PNG images outside of Photoshop - which doesn't do a very good job anyway compressing PNGs. And example of your work would be great.

[JJMack]

Vector files are not a file that are commonly used on the web.   Jpeg, Png, Gif and Mp4 Video files are.    All these file formats support data compression and with today's common Internet speeds they do not need to be the smallest possible for good performance.   For quality what is important are the number if high quality pixels you have for your images.    Your not going to have a high quality image if you only  have an images that is 300px x 200px and your not going to be able display images that are 1500px x 1000px on all displays.  For a large high quality print you will need more than 1500px by 1000px.  High quality Pixels is what is important.  You are not going to be able to interpolate  a High Quality 300px x 200px image up in size to a High Quality 3000px by 2000px image.    You may though be able to interpolate a high quality 3000px x 2000px image down to a high quality 300px by 200px image.  Yes you will loose most of you image details however the small image should still look good.  You will not be able to read its fine print that detail will be gone.   So when you create your document you should create them the largest size you have a need for their  use.      If  you have a need for large high quality prints create your document print size.  You should be able to down size these for other uses like the Web.

[michelew83603738]

It seems like there is a misunderstanding of what the svg. file is. It uses XML to be read and scale and usually takes a web browser to be viewed so I am not surprised that this isn't working. But there are some free svg converters out there that you might want to check out so that you don't have to redraw all of you graphics - they will take your jpg and convert to svg. I haven't used them and am not sure what the result looks like, but you might do a Google search and do a few tests. Not sure that that would address the issue of being able to open on Dropbox however. Good luck.

[BaoziXiu]

I'll definitely give the converters a try. Yes I'm not sure why it's not showing up on dropbox. Although I did try on google drive and it seemed to show but like most everything I tend to say, they ignored me lol.

[JJMack · Accepted solution]

A file with the SVG file extension is most likely a Scalable Vector Graphics file. Files in this format use an XML-based text format to describe how the image should appear. Since text is used to describe the graphic, an SVG file can be scaled to different sizes without losing quality - in other words, the format is resolution independent. This is why website graphics are often built in the SVG format, so they can be resized to fit different designs in the future.

The key words there are "Scalable Vector Graphics "

The problem is a file with the PNG file extension is a Portable Network Graphics file. The format uses lossless compression and is generally considered the replacement to the GIF image format.

However, unlike GIF, PNG files do not support animations. The very similar MNG (Multiple-image Network Graphics) format does, however, but has yet to gain the kind of popularity that GIF or PNG files have.

PNG files are often used to store graphics on websites. Some operating systems like macOS and Ubuntu store screenshots in the PNG format by default.

The key word missing there is "Vector".

Pixel image will not scale without loosing quality. Converting a png file to an SVG file format wil not chane  the png pixel image into  "Scalable Vector Graphics "  there is no vector data in a png file.

[BaoziXiu]

That was my understanding as well thank you! Originally she had said make the images pngs but after an artist said to use svgs that's all she's putting her energy into. I was told they will convert the svgs into jpgs so they will be able to print. Again, I'm not super web savvy so I'm not sure whether something like that is possible or not.

[CzarinaNina]

Forgive me.  I don't have enough time to read all of the replies, so if this is already raised, I'm sorry, but could you reply anyway?

When I save a raster image that I created in Ps as an svg I get the same code as any other svg I save in vector based design apps.  That means that it has the .svg extension, it is scalable, and it is in svg code, but it is not editable in Ai. Wouldn't it be better to consider it a locked svg than consider it a fake svg?

Just curious about what the general consensus of the design community is?

[Test Screen Name]

Please let us know when you've found time to read the eleven replies. You're not the only busy person.

[CzarinaNina]

Give me a break.  You try reading through hundreds of chaotic irrelevant rambling posts, replies, and search results while you have double vision due to having MS. Things take me a bit longer than the normal person, and I have 4 functional hours a day max.  The rest of the day I spend convincing myself that I am still functioning while not getting anything done but creating more to do.  How many hours a day are you able to function?  How long does it take you to read a 10 sentence reply?  Now turn off the lights and cover one eye after staying up 36 hours.  Then tell me how busy you choose to be, because you are able to be. 

[D Fosse]

You need to understand that a raster image doesn't transform into a vector file just by being saved as svg. It is still a raster image. There's no such thing as "svg code".

Svg is just the wrong format to use.

EDIT- ok, I see you eventually reached the same conclusion in another thread.

[CzarinaNina]

SVGs are code.  The reason they are scalable, and called vectors, is that they consist of mathematical coordinates in a XML-type code.   like... did you study forces or kinetics in Physics? That is exactly they way vectors work.  That is why, when compared to raster images, there are very few options to alter your vector graphic past changing the coordinate points (x,y), aka anchors in Adobe Illustrator. If you add much more information to a SVG it takes too long to load, if it loads. 

One way that you can explore this yourself is to right click on a SVG file and open it in Textpad or Notepad, if you don't have Textpad.  If you need help understanding XML or don't recognize patterns well, W3 schools is always a good source for an introduction to code.  I wouldn't be surprised if they even had an explanation of SVGs for you.

[CzarinaNina]

I like to think of vectors as playing connect the dots in Trigonometry class!  Aaah... good memories.

[D Fosse]

You're still missing the point. You can't turn a raster image into vector data, end of story. The svg format has nothing to do with it, except being an utterly inappropriate choice of format for a raster image.

Illustrator can also store raster data as part of an .ai file, but that doesn't make .ai a good format for an image.

[CzarinaNina]

You missed the point. As I dont rasterize my layers in Photoshop, when I “export as” SVG, the image is a SVG, because it isn’t a raster image. The test comes down to the definition. When you read the code of my Photoshop SVGs, when they are not made of rasterized layers, they open in a text editor in the [svg]metadata...coordinates[/svg] code.

When it is a raster image that is “export as” SVG, the image is in [svg][src image][/svg] code.

The interesting thing is, if you take a PSD that is 3600px x 3600px that you made from scratch in Photoshop with ALL unrasterized layers, rasterize ALL the layers, then “export as” svg, then reopen than svg, at the pop up window type in 50px for image size, and “export as” png, the image is pristine. Then do the same thing in an Illustrator document the is 3600px from scratch and scale that in either Illustrator or Photoshop to save as png, and low and behold you get one crap-tacular 50px result! The same craptacular results are created if you alter the size of a PSD from 3600px to 50px in Photoshop to save as png or attemp the same with an Ai file in Ai. This experiment has nothing to do with vector or raster; I think it has to do with something magical the Photoshop seems to be working on.

Now, you ask, “Why on Earth would you want to scale an image from over 3600px to 50px or less cleanly?” I design emoticons. To print them on things like T-Shirts, the Image has to be 3600px plus. To make them usable to lay person online in conversation, the image must be about 50px and a png file. Sure, theoretically, I should be able to do all of this with a normal SVG, right?  Nope it looks like crap.

Here is an exmple:

http://files.jcink.net/uploads/secretsocietyfriends//Lenin_for_Pixabay_50px.png

and

https://www.redbubble.com/people/billithecat/works/32970809-vladimir-lenin-smiley?asc=u&p=t-shirt&re...

Nice. Eh?

[CzarinaNina]

Now here are some pngs made from rasterized Ps svgs.

[CzarinaNina]

[CzarinaNina]

Oh shoot... all of them are from Ps SVGs. Sorry it is 3am where I am.

So I am done. I hope that makes sense of all my strange questions.

[D Fosse]

OK, I'll try one more time, then I'm out:

You don't understand the fundamentally different nature of raster vs vector. That great divide happens long before any file format consideration comes into it. Your data are born as raster, or born as vector. You can't change that without recreating your file from scratch. Work with it, not against it, and life will be a lot easier.

[CzarinaNina]

I just realized where your problem is.  You are assuming that I am starting with a raster image in Photoshop.  I start with a blank layer and add shapes.