Skip to main content
BaoziXiu
BaoziXiu
Participant
February 23, 2018
解決済み

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)

  • February 23, 2018
  • 返信数 4.
  • 6879 ビュー

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.

このトピックへの返信は締め切られました。
解決に役立った回答 JJMack

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.


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.

返信数 4

T
Test Screen Name
Legend
August 30, 2018

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

CzarinaNina
CzarinaNina
Participating Frequently
August 31, 2018

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
Community Expert
D FosseCommunity Expert
Community Expert
August 31, 2018

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
    CzarinaNina
    Participating Frequently
    August 30, 2018

    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?

    JJMack
    Community Expert
    JJMackCommunity Expert
    Community Expert
    February 23, 2018

    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,

    JJMack
    BaoziXiu
    BaoziXiu作成者
    Participant
    February 27, 2018

    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
    rayek.elfin
    Legend
    February 27, 2018

    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.

    T
    Test Screen Name
    Legend
    February 23, 2018

    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...

    T
    Test Screen Name
    Legend
    February 23, 2018

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

      契約条件Accessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices