Skip to main content
A
Andy Ingham
Participant
January 21, 2018
Answered

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

  • January 21, 2018
  • 7 replies
  • 29760 views

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

This topic has been closed for replies.
Correct answer JJMack

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>

7 replies

P
PEPoulin
Participant
October 3, 2019

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.

JonathanArias
JonathanArias
Legend
February 22, 2018

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

    L
    Lukigi
    Participating Frequently
    February 22, 2018

    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.

    L
    Lukigi
    Participating Frequently
    February 22, 2018

    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.

    c.pfaffenbichler
    Community Expert
    c.pfaffenbichlerCommunity Expert
    Community Expert
    February 22, 2018
    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.

    JJMack
    Community Expert
    JJMackCommunity Expert
    Community Expert
    January 23, 2018

    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
    Theresa J
    Community Expert
    Theresa JCommunity Expert
    Community Expert
    January 23, 2018

    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.

    JJMack
    Community Expert
    JJMackCommunity Expert
    Community Expert
    January 22, 2018

    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
    A
    Andy InghamAuthor
    Participant
    January 22, 2018

    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>

    JJMack
    Community Expert
    JJMackCommunity ExpertCorrect answer
    Community Expert
    January 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 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
    c.pfaffenbichler
    Community Expert
    c.pfaffenbichlerCommunity Expert
    Community Expert
    January 21, 2018

    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.

    A
    Andy InghamAuthor
    Participant
    January 22, 2018

    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?

    JJMack
    Community Expert
    JJMackCommunity Expert
    Community Expert
    January 23, 2018
    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.


    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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices