Inspiring

Question

Export SVG in PS and saving same file SVG in AI yields different results

Forum|Forum|5 years ago
March 21, 2021
2 replies
1115 views

Hello,

I saved a smart object in PS as a export SVG file, here is the path.

https://dagrafixdesigns.com/Images/2008/DA_2021/zWalter_49544/TS.svg

It appears nice and crisp when viewing in browser firefox or chrome, so the site i want to display this on here is fine in FIREFOX but in CHROME i see no image.

https://www60.myfantasyleague.com/2021/home/63472#0

I tried to edit the css from reading but could never figure out how to make this show in chrome like it does in firefox.

caption:before  {
 padding:6px 20px 12px 35px;
 background:url(https://dagrafixdesigns.com/Images/2008/DA_2021/zWalter_49544/TS.svg)no-repeat;
 background-size:contain;
 background-position:20% center;
 filter: contrast(1.5);
 content:'';}

So if anyone can help with editing the code great....

However I thought i could take this PS SVG file (which i know isnt the same as a SVG in AI) and open it in AI and save as .SVG or even export as SVG, and i did that and it makes the file all large and blurry as you can see here.

https://dagrafixdesigns.com/Images/2008/DA_2021/zWalter_49544/TS1.svg

I dont know why it is doing that or how to fix that either in AI.

So not sure what the best aproach here is to fix the issue, is it code css edit or AI help to get it like PS svg?

Thank you

Dean

This topic has been closed for replies.

umaynomeAuthor

Inspiring

Part of the question asked is what does AI take this same Photoshop made SVG file, and when you save it in AI as a SVG, it makes the saved filed larger than the PS SVG file. (still not sure).

Second part was why is the SVG showing up in Firefox but not in chrome, the answer i found on the Web for anyone who needs help for something similiar, is to open the SVG file in notepad, and change the IMG to IMAGE, and save it throughtout.

This fixed my issue and now the save PS SVG file is shown across all browsers.

Thanks

JJMack

Community Expert

You can place a AI saved SVG into Photoshop as a vector smart object layer. There Are no vectors in Photoshop for the Vector Smart Object. The vectors are in the Object and the vector smart object layer will be scaled via vector Graphics by processing the Object. Basically the Object is imported as Pixle the correct size for the resize you are doing. I do not install AI. However, I believe the SVG I exported from Photoshop would open as vector layer in AI. I'll post the text in that SVG here. Copy and paste it into text editor. Save it as a xxx.svg file then open it in AI.

<svg id="Shapes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1671" height="1625" viewBox="0 0 1671 1625">
  <defs>
    <style>
      .cls-1, .cls-2 {
        fill-rule: evenodd;
      }

      .cls-1 {
        fill: url(#linear-gradient);
      }

      .cls-2 {
        fill: url(#linear-gradient-2);
      }
    </style>
    <linearGradient id="linear-gradient" x1="833.5" y1="1625" x2="833.5" y2="8" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#6fe7e7"/>
      <stop offset="0.404" stop-color="#3e6060"/>
      <stop offset="0.691" stop-color="#3e6060"/>
      <stop offset="0.991" stop-color="#6fe7e7"/>
      <stop offset="1" stop-color="#6fe7e7"/>
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="831.502" y1="861.781" x2="831.502" y2="379.219" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#2ea4a4"/>
      <stop offset="1" stop-color="#65d0d0"/>
    </linearGradient>
  </defs>
  <path id="Shape_900_1" data-name="Shape 900 1" class="cls-1" d="M1265.54,933.091c3.95,12.172,8.87,39.33,13.01,64.075,9,53.664-22.42,128.834-37.04,163.194-50.23,118.05-147.7,248-238.28,326.38-42.813,37.05-81.089,76.5-128.15,110.13-4.549,3.25-39.65,30.02-44.052,28.04-10.309-4.65-22.811-17.08-32.037-24.03-39.786-29.99-74.957-61.51-112.132-93.11-109.529-93.12-226.523-244.72-279.327-393.47-15.847-44.64-25.913-121.454-8.009-172.2q10.01-23.025,20.023-46.054c11.709-34.019,27.032-92.109,27.032-92.109l-3-62.073-24.028-62.073C182.4,368.958,56.442,230.463,7.063,177.2c-0.464.584,1.335-.667,2-1,156.247,91.6,403.382,95.318,402.472,97.115C335.222,388.925,380.5,565.82,504.646,640.746c26.216,15.823,106.212,64.2,184.216,28.033,88.71-39.59,131.69-164.921,95.111-287.339v-1c-29.387-125.26-188.22-195.23-188.22-195.23a525.188,525.188,0,0,0,140.164-77.091A524.808,524.808,0,0,0,835.033,8a653.345,653.345,0,0,0,97.114,95.112c42.424,33.667,138.163,84.1,138.163,84.1C971.419,224.647,894.63,306.16,875.08,408.472c-17.364,90.872,6.262,220.728,94.11,262.309,105.21,49.8,259.43-47.272,305.36-173.2,26.88-73.7,10.41-152.228-20.03-225.265,93.57,6.4,248.26-22.323,405.48-97.115-270.68,300.452-468.39,516.4-427.5,652.77C1242.28,860.589,1253.86,897.134,1265.54,933.091Z"/>
  <path id="Shape_901_1" data-name="Shape 901 1" class="cls-2" d="M80.314,736.2L60.349,716.941s77.821,19.6,208.635-54.747c13.842-7.868,59.9-35.484,59.9-35.484-16.676-44.651-21.929-60.876-3.993-87.191C466.961,369.334,827.493,379.323,832,379.332c216,0.469,487.341,86.475,509.111,184.519,4.15,18.676-2.94,38.607-14.97,58.8,17.66,9.006,34.71,17.994,51.9,27.374,46.84,25.553,80.05,46.717,125.78,58.8,32.43,8.567,65.47,10.118,98.83,9.124-5.99,4.055-13.97,11.153-19.96,15.208,0.99,2.7,5.99,7.1,5.99,7.1a203.309,203.309,0,0,1-37.94,25.346,201.2,201.2,0,0,1-46.92,17.235,121.867,121.867,0,0,0,45.92,24.332l35.94,9.125a41.146,41.146,0,0,1-21.96,13.18,23.672,23.672,0,0,0,12.98,5.069,155.984,155.984,0,0,1-51.91,22.3c-83.42,18.6-140.11-26.388-188.67-59.816-13.71-9.438-28.5-22.923-45.92-31.429-2.71,16.314-8.77,30.131-18.97,40.553-6.11,6.25-14.93,11.134-14.97,11.153L1231,824c-5.3-25.51-4.08-45.439-1.7-69.547,1.97-19.842,16.97-58.8,16.97-58.8C1123.51,633.156,981.32,590.325,831,591.225c-171.674-15.921-406.29,92.26-406.29,92.26A219.02,219.02,0,0,1,448.669,779.8c0.174,14.626,1.7,30.056-6.669,43.2a61.07,61.07,0,0,1-19.267-1.554c-10.415-2.42-17.228-3.886-25.973-10.217-13.331-18.393-22.96-51.706-22.96-51.706l-25.954,16.221L272.977,827.45c-35.7,25.31-78.523,37.851-121.787,33.457a173.949,173.949,0,0,1-73.871-25.346l18.967-6.083L75.322,817.312a158.855,158.855,0,0,0,79.861-35.485,142.76,142.76,0,0,1-52.908-16.221A144.342,144.342,0,0,1,65.34,737.218Z"/>
</svg>

Hers is How Chrome displaye it when I zoom out in the browser so it fits one my display yhe pmg svg you posted was quite large..

JJMack

Community Expert

Its not a vector image its a png pixel image wrapped in a SVG file. If your PSD file has the image as two shape layers. Perhaps if you export as as SVG the svg will certain the shapes with a gradient fill and a solid fill and be a SVG with vector objects. Now you have png objects.

JJMack

umaynomeAuthor

Inspiring

What is the reason AI when saving this PNG-Wrapped in a SVG from PS, the file is blown up and blurry and not the same size as the PS saved file?

JJMack

Community Expert

You created files. I would say you did not use vector shapes you may rasterized a shape or place in a png. When I do a try with shapes with Photoshop when I exported the document as an svg It contained Paths and shape paths.

JJMack

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded