7 Replies Latest reply on Mar 30, 2016 3:33 PM by elainecc

    Importing SVG images

    SylviaMcc

      Hi folks,

       

      I am trying to import an SVG image and getting a blank box. What am I doing wrong?

       

      thanks

      Sylvia

        • 1. Re: Importing SVG images
          Corrinna Rainwater Adobe Employee

          Hi Sylvia,

           

          you should just be able to copy & paste or drag & drop. Could you attach the SVGs?

           

          Thanks, Corrinna

          • 2. Re: Importing SVG images
            SylviaMcc Level 1

            Hi Corrinna,

             

            1. I tried using finder to copy and paste the file, that didn’t work

            2. I opened the file in PS and copied  and pasted into XD.  That worked.

             

             

             

            I’m just getting into responsive web design. Could you please tell me what the highest resolution I should use is? I noticed one of my SVG files was set to a resolution of 300. What is the highest I should go?

             

            Thank you.

             

            Sylvia McConnell

            Sylvia Mobile: (613) 291-1050

            Email: sm.webview@gmail.com

            • 3. Re: Importing SVG images
              Corrinna Rainwater Adobe Employee

              Hi Sylvia,

               

              where do you have the number from?

               

              Thanks, Corrinna

              • 4. Re: Importing SVG images
                SylviaMcc Level 1

                I grabbed a high resolution photo in Photoshop and exported it out as SVG. I did all the export sizes. When I opened up the largest SVG file in Photoshop to copy and paste it into XD, I was told it was too big for the clipboard.

                 

                IN Photoshop I clicked Image/image size and it told me it was 300.

                 

                Sylvia McConnell

                Sylvia Mobile: (613) 291-1050

                Email: sm.webview@gmail.com

                • 5. Re: Importing SVG images
                  Corrinna Rainwater Adobe Employee

                  Hi Sylvia,

                   

                  for responsive design you just design in 1x.

                   

                  However, right now this does not matter for XD as we are scaling the artboard itself for mobile devices. Just pick an artboard in the size you need.

                   

                  Hth, Corrinna

                  • 6. Re: Importing SVG images
                    SylviaMcc Level 1

                    Sorry I’m not quite understanding you.

                     

                    So if I start with an image that is 1000px wide and 300 resolution.

                     

                    I want to place it on an artboard that is 800px wide.

                     

                    My normal workflow is to resample it in Photoshop to 72 resolution and 800px wide and save it as a .jpg. I would have to do that for every size or device I am designing for.

                     

                    As I understand your email now in XD  I only change the resolution from 300 to 72 resolution and save it as 1X size. Then I just import that one size image into XD and copy and paste it onto every size of artboard? It will automatically optimize the images to the correct size?

                     

                    Thanks for your help

                    Sylvia McConnell

                    Sylvia Mobile: (613) 291-1050

                    Email: sm.webview@gmail.com

                    • 7. Re: Importing SVG images
                      elainecc Adobe Employee

                      Hi, Sylvia-

                       

                      SVGs are a special type of image type that works best with vector artwork. If you have bitmap artwork from Photoshop, your best bet is to export as PNG or JPG. If you export as JPG, I'd advise you to save as twice the size that you want (e.g. if your artboard is 1000px across and you want a banner, export at 2000px) and then drag that onto the stage. Otherwise, your PNG should be the same size as the size of your artboard in XD.

                       

                      There's no need to use SVG unless you have a lot of vector artwork you want to edit later in XD!

                       

                      Hope that helps clarify things for you!

                       

                      -Elaine

                      1 person found this helpful