Skip to main content
StarAG​
Known Participant
Feb 16, 2020 12:38 PM UTC
Answered

Pasting SVG Code in Illustrator

I need some information.

 

I have an SVG code. Is it possible to paste the SVG code directly in illustrator get the artwork from the code.

SVG code (from other source) > Copy > Open Illustrator Document > Paste the code > Get the artwork.

 

I dont want to save SVG each time and import it in illustrator.

I hope it make sense. 

    marka61772970Correct answer
    Participant
    Aug 10, 2020 2:27 PM UTC

    You could use the following tool: https://jakearchibald.github.io/svgomg/ , simply copy/paste the code in then download as a binary file.

    View reply

    13 replies

    Clever_sincerity11e2
    Participant
    Oct 23, 2026 9:02 PM UTC

    <!DOCTYPE html>

    <html lang="ar" dir="rtl">

    <head>

    <meta charset="UTF-8">

    <title>Badge CYZ - موظف</title>

    <style>

      :root{

        --blue:#0B2A5B;

        --blue2:#123E7A;

        --yellow:#FFD54A;

        --white:#FFFFFF;

      }

     

      *{ box-sizing:border-box; }

     

      body{

        margin:0;

        min-height:100vh;

        display:flex;

        align-items:center;

        justify-content:center;

        background:#e9eef5;

        font-family: Arial, "Tahoma", sans-serif;

      }

     

      .badge{

        width:54mm; /* صغير */

        height:34mm;

        background: linear-gradient(135deg, var(--blue), var(--blue2));

        border-radius:3mm;

        position:relative;

        overflow:hidden;

        color:var(--white);

        box-shadow:0 6px 18px rgba(0,0,0,.25);

        padding:3mm;

        display:flex;

        flex-direction:column;

        justify-content:space-between;

      }

     

      /* لمسة صفراء دائرية */

      .badge::before{

        content:"";

        position:absolute;

        top:-8mm;

        left:-8mm;

        width:22mm;

        height:22mm;

        border:2mm solid var(--yellow);

        border-radius:50%;

        opacity:.9;

      }

     

      /* شريط أصفر سفلي */

      .badge::after{

        content:"";

        position:absolute;

        bottom:0;

        right:0;

        width:100%;

        height:1.5mm;

        background:var(--yellow);

      }

     

      .top{

        display:flex;

        align-items:center;

        justify-content:space-between;

        position:relative;

        z-index:2;

      }

     

      .company{

        font-size:3.2mm;

        font-weight:900;

        letter-spacing:1px;

      }

     

      .company span{ color:var(--yellow); }

     

      .line{

        width:10mm;

        height:.8mm;

        background:var(--yellow);

        border-radius:2mm;

      }

     

      .middle{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:2mm;

        position:relative;

        z-index:2;

      }

     

      .role{

        font-size:6.5mm;

        font-weight:900;

        line-height:1;

      }

     

      .role small{

        display:block;

        font-size:2mm;

        font-weight:700;

        color:var(--yellow);

        margin-top:.8mm;

        letter-spacing:.5px;

      }

     

      .qr{

        width:15mm;

        height:15mm;

        background:var(--white);

        border:.8mm solid var(--yellow);

        border-radius:1.5mm;

        display:flex;

        align-items:center;

        justify-content:center;

        color:var(--blue);

        font-size:1.8mm;

        font-weight:900;

        text-align:center;

      }

     

      .bottom{

        display:flex;

        justify-content:space-between;

        align-items:center;

        font-size:1.6mm;

        color:rgba(255,255,255,.85);

        position:relative;

        z-index:2;

      }

     

      .bottom b{ color:var(--yellow); }

     

      @media print{

        body{ background:white; }

        .badge{ box-shadow:none; }

      }

    </style>

    </head>

    <body>

     

      <div class="badge">

        <div class="top">

          <div class="company">C<span>Y</span>Z</div>

          <div class="line"></div>

        </div>

     

        <div class="middle">

          <div class="role">

            موظف

            <small>EMPLOYÉ</small>

          </div>

     

          <!-- بدّل هذا بـ QR حقيقي -->

          <div class="qr">QR</div>

        </div>

     

        <div class="bottom">

          <div>داخلية — <b>غير قابلة للتداول</b></div>

        </div>

      </div>

     

    </body>

    </html>

    Translate
    Clever_sincerity11e2
    Participant
    Oct 23, 2026 8:59 PM UTC

    <!DOCTYPE html>
    <html lang="ar" dir="rtl">
    <head>
    <meta charset="UTF-8">
    <title>Badge CYZ - موظف</title>
    <style>
      :root{
        --blue:#0B2A5B;
        --blue2:#123E7A;
        --yellow:#FFD54A;
        --white:#FFFFFF;
      }

      *{ box-sizing:border-box; }

      body{
        margin:0;
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#e9eef5;
        font-family: Arial, "Tahoma", sans-serif;
      }

      .badge{
        width:85.6mm;
        height:54mm;
        background: linear-gradient(135deg, var(--blue), var(--blue2));
        border-radius:4mm;
        position:relative;
        overflow:hidden;
        color:var(--white);
        box-shadow:0 8px 24px rgba(0,0,0,.25);
        padding:5mm;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
      }

      /* لمسات صفراء */
      .badge::before{
        content:"";
        position:absolute;
        top:-12mm;
        left:-12mm;
        width:36mm;
        height:36mm;
        border:3mm solid var(--yellow);
        border-radius:50%;
        opacity:.9;
      }

      .badge::after{
        content:"";
        position:absolute;
        bottom:0;
        right:0;
        width:100%;
        height:2.5mm;
        background:var(--yellow);
      }

      .top{
        display:flex;
        align-items:center;
        justify-content:space-between;
        position:relative;
        z-index:2;
      }

      .company{
        font-size:5mm;
        font-weight:900;
        letter-spacing:1px;
        color:var(--white);
      }

      .company span{
        color:var(--yellow);
      }

      .line{
        width:18mm;
        height:1.2mm;
        background:var(--yellow);
        border-radius:2mm;
      }

      .middle{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:4mm;
        position:relative;
        z-index:2;
      }

      .role{
        font-size:10mm;
        font-weight:900;
        color:var(--white);
        line-height:1;
      }

      .role small{
        display:block;
        font-size:3.2mm;
        font-weight:700;
        color:var(--yellow);
        margin-top:1.5mm;
        letter-spacing:1px;
      }

      .qr{
        width:25mm;
        height:25mm;
        background:var(--white);
        border:1.2mm solid var(--yellow);
        border-radius:2mm;
        display:flex;
        align-items:center;
        justify-content:center;
        color:var(--blue);
        font-size:3mm;
        font-weight:900;
        text-align:center;
        padding:2mm;
      }

      .bottom{
        display:flex;
        justify-content:space-between;
        align-items:center;
        font-size:2.6mm;
        color:rgba(255,255,255,.85);
        position:relative;
        z-index:2;
      }

      .bottom b{
        color:var(--yellow);
      }

      @media print{
        body{ background:white; }
        .badge{
          box-shadow:none;
          border-radius:3mm;
        }
      }
    </style>
    </head>
    <body>

      <div class="badge">
        <div class="top">
          <div class="company">C<span>Y</span>Z</div>
          <div class="line"></div>
        </div>

        <div class="middle">
          <div class="role">
            موظف
            <small>EMPLOYÉ</small>
          </div>

          <!-- بدّل هذا بـ QR Code الحقيقي -->
          <div class="qr">QR<br>CODE</div>
        </div>

        <div class="bottom">
          <div>بطاقة داخلية — <b>غير قابلة للتداول</b></div>
          <div>CYZ</div>
        </div>
      </div>

    </body>
    </html>

    Translate
    saranroy
    saranroy
    Participant
    May 6, 2021 8:35 AM UTC

    Yes, it's possible. Check this.

    Open Adobe Illustrator CC and paste this in an artboard:

     

    <svg width="20" height="20" viewBox="0 0 24 24">
<path d="M14 2A8 8 0 0 0 7.4 14.5L2.4 19.4a1.5 1.5 0 0 0 2.1 2.1L9.5 16.6A8 8 0 1 0 14 2Zm0 14.1A6.1 6.1 0 1 1 20.1 10 6.1 6.1 0 0 1 14 16.1Z"></path>
</svg>

     

    It's the SVG code of the search icon from this website. Paste get the artwork, as you have wished.

    Translate
      marka61772970Correct answer
      Participant
      Aug 10, 2020 2:27 PM UTC

      You could use the following tool: https://jakearchibald.github.io/svgomg/ , simply copy/paste the code in then download as a binary file.

      Translate
        SuyashJoshi
        Participant
        Aug 13, 2024 11:14 AM UTC

        Exactly what I was looking for, thanks!

        Translate
        CarlosCanto
        Community Expert
        CarlosCantoCommunity Expert
        Community Expert
        Feb 19, 2020 6:21 AM UTC

        can you share one of the trouble files?

        Translate
        CarlosCanto
        Community Expert
        CarlosCantoCommunity Expert
        Community Expert
        Feb 16, 2020 7:30 PM UTC

        have your tried copying/pasting? I just did and it worked fine here Win 10, CC2020.

         

        the svg code I copied was a file I exported from Illustrator, I'm not sure if svg from other sources will work as well.

        Translate
          StarAG​Author
          Known Participant
          Feb 17, 2020 1:33 AM UTC

          Wow, that actually worked. It was pretty easy 🙂

          Thanks a lot and my bad for never trying the same. 😄

           

          However, for some (or many) files it says 

          "cannot paste the objects. the requested transformation would make some objects fall"

          Any solution for this?

          Translate
          CarlosCanto
          Community Expert
          CarlosCantoCommunity Expert
          Community Expert
          Feb 17, 2020 3:58 PM UTC

          do those files open without issues using the UI? or do you still get the error message?

          Translate
          Monika Gause
          Community Expert
          Monika GauseCommunity Expert
          Community Expert
          Feb 16, 2020 1:23 PM UTC

          That's not possible. Paste the code into a text file and then save it. Then you can open it in Illustrator and import it.

          Translate
            StarAG​Author
            Known Participant
            Feb 16, 2020 1:28 PM UTC

            Thats the solution I am already aware of. 

            I have a specific requirement as I have to work in many SVG files. Its getting tidious task in exporting and importing. 

             

            Is there any kind of tool/plugin available which can perform such task?

            Translate
            Monika Gause
            Community Expert
            Monika GauseCommunity Expert
            Community Expert
            Feb 16, 2020 1:57 PM UTC

            I'm not aware of a plugin that does this.

            Translate
            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices