• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Export a 'proper' SVG from a PS Vector Smart Object?

New Here ,
Jan 21, 2018 Jan 21, 2018

Copy link to clipboard

Copied

Hi,

When I use 'Export As...' to export a Vector Smart Object in PS as an SVG file, the output seems to be just a PNG embedded within an SVG. Is there a way to output a 'proper' SVG file, i.e. one which is completely scalable?

My question is similar to this one - Why don't Photoshop CC library smart objects open in Illustrator anymore? - but that just refers to a 'smart object' rather than a 'vector smart object'.

I'm using PS CC rel. 19.0.

Andy

Views

26.9K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 22, 2018 Jan 22, 2018

Is that what a PNG file look like readable text?  When I export a rectangle shape from Photoshop as an svg  below is the readable data in the SVG file/ Do you think that that is also a png image? I see text that look like the rectangle coordinates on the SVG Canvas. I do not see where its black color is recorded.  When Photoshop scales the canvas size it would also scale the rectangle  coordinates it would be a vector resize IMO and since the files is in the Smart Object Layer's object one way o

...

Votes

Translate

Translate
Adobe
Community Expert ,
Jan 21, 2018 Jan 21, 2018

Copy link to clipboard

Copied

Vector Smart Objects’ instances within a layered Photoshop file are represented as pixel data so what you seem to want to achieve is not possible as of now.

You should be able to open the SO in Illustrator and export an SVG from there.

SVG expor from Photoshop would primarily seem to make sense if a layered Photoshop file contains Shape and/or Type Layers and/or Vector Masks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 22, 2018 Jan 22, 2018

Copy link to clipboard

Copied

So PS has rasterized it when it was brought into PS and doesn't actually hold any of the vector info? What's the point in calling it a 'Vector Smart Object' then? I guess that just shows that it originated as a vector based object?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 22, 2018 Jan 22, 2018

Copy link to clipboard

Copied

So PS has rasterized it when it was brought into PS and doesn't actually hold any of the vector info? What's the point in calling it a 'Vector Smart Object' then? I guess that just shows that it originated as a vector based object?

The layered file contains (or links to) the ai/pdf/… so the instances can always be recalculated on the basis of that vector data without accumulating degradation but it will output as pixels.

The Help does not seem to emphasise this 

Smart Object Pastes the art as a Vector Smart Object that can be scaled, transformed, or moved without degrading the image. As the art is placed, its file data is embedded in the Photoshop document on a separate layer.

but I also found no claim that Vector Smart Objects would output as vector data.

As mentioned before if one needs to output vector data from Photoshop one should to utilise Vectors Masks, Type Layers, … in Photoshop.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 23, 2018 Jan 23, 2018

Copy link to clipboard

Copied

If  a smart object layer's object is a vector object a Placed vector file like an .AI file or .svg file  If you open the layers object in Photoshop, Photoshop should copy the objects vector file into a temp work file then open the work file for you to work on.  If .svg and .ai extensions are associated with a vector editor like Adobe Illustrator should open the work file properly.  If you make changes in Illustrator and save the work file Photoshop will see  the the file has been changed and update the Smart object layer's object with the  updated vector file.  If the object was a Placed PSD file the temp work PSD file would be opened  in Photoshop and would contain all the vector layer and paths the original PSD file had.   So  objects that contain vector layers can  be worked on with vector tools by opening the Smart object layer's object in Photoshop. A placed PSD file is not a vector object it will be scaled via interpolation.  However the vector in the object can be work on  by opening the object in Photoshop.

While working on the opened temp work  yos cak save out other files the contain vectors. So IMO you can get vectors out of some Smart Object Layers.

JJMack

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 21, 2018 Jan 21, 2018

Copy link to clipboard

Copied

Try editing your exported .svg file with a text editor like notepad and let me know it you still think its a png format file. IMO Photoshop's handling of SVG is a bit strange.  It is what it is...

JJMack

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 22, 2018 Jan 22, 2018

Copy link to clipboard

Copied

The exported SVG comes out like this (I've skipped some of the lines, but this basic structure):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="69.76" height="69.76" viewBox="0 0 109 109">

  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>

<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">

   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

      <rdf:Description rdf:about=""/>

   </rdf:RDF>

</x:xmpmeta>

<?xpacket end="w"?></metadata>

<image id="Vector_Smart_Object" data-name="Vector Smart Object" width="109" height="109" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mA

JmhBQm4ykWUVjM9JCQwmD6R8QUOvNjQFChMj8DogqVmRRWqIy4QmeEFSojriQyv9p/iytR5g++jxunFCqNPwAAAABJRU5ErkJggg=="/>

</svg>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 22, 2018 Jan 22, 2018

Copy link to clipboard

Copied

Is that what a PNG file look like readable text?  When I export a rectangle shape from Photoshop as an svg  below is the readable data in the SVG file/ Do you think that that is also a png image? I see text that look like the rectangle coordinates on the SVG Canvas. I do not see where its black color is recorded.  When Photoshop scales the canvas size it would also scale the rectangle  coordinates it would be a vector resize IMO and since the files is in the Smart Object Layer's object one way or an other.  Placed SVG files and AI files can be a Vector Smart object   It is true that if  you open an SVG or AI file in Photoshop it will be Opened as a single merged layer that is a raster layer.  However the SVG and AI files are vector files ant that is what is in the placed layer's object. If you transform the smart object layer Photoshop would Just need to scale the file like it can when Photoshop  opens a vector file and scales it to size. 

Work with Smart Objects in Photoshop

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="500" viewBox="0 0 700 500">

  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>

<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">

   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

      <rdf:Description rdf:about=""/>

   </rdf:RDF>

</x:xmpmeta>

                     

<?xpacket end="w"?></metadata>

<rect x="159" y="93" width="369" height="299"/>

</svg>

JJMack

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 22, 2018 Jan 22, 2018

Copy link to clipboard

Copied

I am pretty certain that there is no way to get vector content out of a smart object. Meaning that there is no way to save, export or embed the Ps smart object content and end up with vector art. You have two options. First you can open the smart object content in Illustrator and save the svg file from there. Or, you can recreate the content using vector shape tools in Photoshop.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 22, 2018 Jan 22, 2018

Copy link to clipboard

Copied

Photoshop is basically a pixels editor that has some vector tools including text. So you can create some vector art and custom shapes and save PSD files that contain all vector layers which can have layer styles added. So with work, knowledge and planning you can create vector art and save the art in PSD files using Photoshop.  However If you really want to create vector art you should use a vector editing application like Adobe Illustrator which will  has more and better vector tools than Photoshop.   Photoshop can be scripted and use vector and layout things so you can do many things in Photoshop.  Still you should use the proper application for what you do all the time.  If your gold is to create vector art all the time Photoshop is not the Application you should be using.

A Smart object Layers object may contain all vector things like Shape layers and text layers You can open Smart Object layer's  object  and work on any vector item and  change them using vector tools.  When you commit the changes Photoshop will update the Smart object layer's object you opened changed and committed the changes.    So some thing can be done with vector graphics in Object that have vector components.

Photoshop support of vector files like .SVG and .AI is a mixed bag if you open a vector files using Photoshop you well not have any vectors  layers in Photoshop you will just have a single raster layer, except if you use a Photoshop Plug-in that supports vector file extension.  There is a Photoshop Plug-in that has some support for SVG files. It has some limitations. Opening an SVG with this Photoshop Plug-in installed you will see many of the svg vector layers open in yoru Photoshop document. There are a few SVG features that are not supported.  

JJMack

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 22, 2018 Feb 22, 2018

Copy link to clipboard

Copied

This basically kills PS as a layout tool. With all the export options designed to give you streamlined asset library one would think this is what Adobe was aiming at, but then why limit svg export options. I think PS while exporting should open all original liked files (it does have that information at all) and create assets from original files. If I have 20 smart objects in a project I can't be expected to manually open each one of them and save as svg.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 22, 2018 Feb 22, 2018

Copy link to clipboard

Copied

I think PS while exporting should open all original liked files (it does have that information at all) and create assets from original files.

And if the SO has been transformed and skewed what do you imagine Photoshop should export?
If an operation cannot succeed in some cases it would seem like a source of problems with regard to user-experience to implement it nonetheless because it would work out in a few cases.

This basically kills PS as a layout tool.

What kind of layouts are you talking about?

Because if it’s page layout then Photoshop has never been the most prudent choice for that anyway, in my opinion.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Feb 22, 2018 Feb 22, 2018

Copy link to clipboard

Copied

Photoshop is not a layout tool.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 22, 2018 Feb 22, 2018

Copy link to clipboard

Copied

Wow a lot of personal opinions here, PS has been used as a web design layout tools for ages, why do you think all the assets export generators, type styles, guide layouts definitely not for photographers nor digital painters.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 22, 2018 Feb 22, 2018

Copy link to clipboard

Copied

"This basically kills PS as a layout tool." Good. Adobe make an  excellent layout tool. I know it would seem to be a time saver, but sometimes the screwdriver in your hand is not the best tool for putting that nail in the wall. These little by little vector additions to Photoshop run a real danger of leading people into using it for tasks where there is a much better solutions. I've heard from people who've used Photoshop to create official forms, multipage reports or newsletters, but the pain they found was all because it was the wrong tool, not because Photoshop is bad.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 22, 2018 Feb 22, 2018

Copy link to clipboard

Copied

"This basically kills PS as a layout tool." Good. Adobe make an  excellent layout tool.

Absolutely agree, and I know they are working on XD, but the last time I've sued that it was far away from finished, maybe in one more year, but at the moment after trying Illustrator and inDesign for doing web layouts I still find PS to be the best with the only exception of exporting smart vectors in a time where svg is dominating web as a format.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 20, 2018 Jun 20, 2018

Copy link to clipboard

Copied

Take a look at Export Kit if you want to use Photoshop for layouts.Export Kit - Your Interactive Tool Belt

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 20, 2018 Jun 20, 2018

Copy link to clipboard

Copied

Lukigi  wrote

I still find PS to be the best with the only exception of exporting smart vectors in a time where svg is dominating web as a format.

The problem is that Photoshop does not have SVG file format support.  .SVG are only Vectors Smart Object was they are Placed  *.svg files.  If you open a *.SVG file in Photoshop it opens as a none vector pixel layer.  Photoshop does not support  .svg files.  Photoshop may be able to export some layers like a Shape layer as a proper .SVG  file.  

You will not  find .svg listed here Supported file formats in Photoshop

JJMack

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Feb 22, 2018 Feb 22, 2018

Copy link to clipboard

Copied

There is a great  video course  on lydan.com on using illustrator for svg. I think you are in the wrong program all together, here:

Illustrator CC for Web Design: SVG

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 22, 2018 Feb 22, 2018

Copy link to clipboard

Copied

I have been using Illustrator for svg creation for ages, don't need training on that, but exporting assets from multiple programmes takes time, that could be easilly automated by software. All I'm saying is that PS should be able to export SVG properly. Honestly, there is no advantage of having exported svg with an embedded png in it. Can anyone tell me what is the point of it? If there is an option to export svg from a vector smart object it should export a proper SVG with vectors not embedded rasters, and since PS has that information I don't see why not to do it.

And if the SO has been transformed and skewed what do you imagine Photoshop should export?

If an operation cannot succeed in some cases it would seem like a source of problems with regard to user-experience to implement it nonetheless because it would work out in a few cases.

It's a valid point and I must say I didn't think about it, mostly because I would never skew vector in PS.

The solution may be to utilise the library as a proper asset management and export tool, it persist in all Adobe apps, lets now have the ability to extract assets from it to outside.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 03, 2019 Oct 03, 2019

Copy link to clipboard

Copied

LATEST

Vector tools from PS always felt hacky. Experienced the same problem lately and here's what I did to overcome this:

 

1) Drag my SO into the project's library

2) Drag the .ps library asset into Illustrator file (hold option to be able to edit path)

3) Export SVG from Illustrator

 

I concur it shouldn't be that complicated, since the SO does include the vector information somewhere.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines