10 Replies Latest reply on Mar 29, 2017 2:56 PM by Qwertyfly...

    Automatically create 2d drawings

    benganv2955966

      Hello!

       

      I work for a company that sells windows (the kind you look through, not the OS!) and I am wondering if its possible to create very simple 2d drawings of these windows in all the different sizes, colors and also with horizontal and vertical bars through the windows as you might have seen some people have. These images are to be used for our webshop customiser. There are plenty of more options I could possably add but I think this would be a good start!

      We have a lot of different sizes, colors etc. so would need to make hundreds, maybe a thousand which obviously takes way to long.

      I have no experience whats so ever with scripting but do you know if this is possible?

        • 1. Re: Automatically create 2d drawings
          CarlosCanto Adobe Community Professional & MVP

          yes it's possible. One would use the provided rectangle() method of the pathItems Object

           

          Here is a sample about creating shapes from the Scripting Reference

           

          Creating shapes

           

          // Creates 5 shapes in layer 1 of document 1
          // and applies a random graphic style to each
          var doc = app.documents.add();
          var artLayer = doc.layers[0];
          app.defaultStroked = true;
          app.defaultFilled = true;
          var rect = artLayer.pathItems.rectangle( 762.5, 87.5, 425.0, 75.0 );
          var rndRect = artLayer.pathItems.roundedRectangle(
          637.5, 87.5, 425.0, 75.0, 20.0, 10.0 );
          // Create ellipse, 'reversed' is false, 'inscribed' is true
          var ellipse = artLayer.pathItems.ellipse(
          512.5, 87.5, 425.0, 75.0, false, true );
          // Create octagon, and 8-sided polygon
          var octagon = artLayer.pathItems.polygon( 300.0, 325.0, 75.0, 8 );
          // Create a 4 pointed star
          var star = artLayer.pathItems.star( 300.0, 125.0, 100.0, 20.0, 4 );
          for ( i = 0; i < artLayer.pathItems.length; i++ ) {
          styleIndex = Math.round(
          Math.random() * ( doc.graphicStyles.length - 1 ) );
          doc.graphicStyles[styleIndex].applyTo( artLayer.pathItems[i] );
          }
          
          • 2. Re: Automatically create 2d drawings
            benganv2955966 Level 1

            Ok thanks!!

             

            So if I wanted to create a series of rectangles in the sizes 100x100, 200x100,100x200 etc. Without any bar and in a bunch of different colours lets say #000000, #cc0000 etc for each size. And then again all of these but with bars 1 horizontal, then one with 1 vertical, then one with both, then one with 2 vertical and 1 hor. etc.

            Is this overly complicated?

            • 3. Re: Automatically create 2d drawings
              Silly-V Adobe Community Professional

              You know, it sounds as if this whole process can be automated to be completely up on the web! You can get a web designer who knows his SVGs to create a little widget to dynamically construct these drawings as the customer looks at them. I imagine such a widget could have added user-friendly interactivity such as being able to switch the color without needing to reload the page.

              However, yea starting off with Illustrator and creating all the images would be useful too, for those users who are on devices without javascript (which should be very rare) and for familiarizing oneself with the art objects involved.

              • 4. Re: Automatically create 2d drawings
                Silly-V Adobe Community Professional

                What you would need to start with is getting all your sizes into a .csv spreadsheet so that a script can be written to read it and create the drawing based on your row data.

                • 5. Re: Automatically create 2d drawings
                  CarlosCanto Adobe Community Professional & MVP

                  it depends, it could be easy, or overly complicated once you start adding features

                   

                  the code to create 1 rectangle is simple, you can treat your horizontal and vertical bars as other rectangles

                   

                  var rect = app.activeDocument.pathItems.rectangle( 0, 0, 425.0, 75.0 ); // (top, left, width, height)

                   

                  if you want to do it yourself, try tweaking the code above to your needs

                  • 6. Re: Automatically create 2d drawings
                    Qwertyfly... Level 4

                    here is a messy example of a SVG window image in a HTML with a button for random color change.

                    should give you an idea of what can be done.

                    the cross bars can also be hidden or shown via code as well, ( not implemented here )

                     

                    <html>
                    <body>
                    <script>
                    function colorChange(){
                    var hex = (Math.random()*0xFFFFFF<<0).toString(16);
                    win1.style.fill = '#' + hex;
                    win2.style.fill = '#' + hex;
                    win3.style.fill = '#' + hex;
                    win4.style.fill = '#' + hex;
                    }
                    </script>
                    <button type="button" onclick=colorChange()>switch Color</button>
                    <?xml version="1.0" encoding="utf-8"?>
                    <!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 494 611" style="enable-background:new 0 0 152 188;" xml:space="preserve">
                    <style type="text/css">
                      .st0{fill:#F5F5F5;}
                      .st1{fill:url(#SVGID_1_);}
                      .st2{fill:url(#SVGID_2_);}
                      .st3{fill:url(#SVGID_3_);}
                      .st4{fill:url(#SVGID_4_);}
                    </style>
                    <g>
                    
                      <image style="overflow:visible;opacity:0.2;" width="135" height="173" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAACuCAYAAADtT0V5AAAACXBIWXMAAAsSAAALEgHS3X78AAAA
                    GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABApJREFUeNrs2l1vG0UUgGGvd500
                    bSlfvUOiN1zx//8OqgSoIFoKTZs4H/aaM/Q4ml07pqrERdbPKx05TuJcOI9mZm13s2HNPV9rum1G
                    t4O6EYgy85g2b+egTBpFH7PO6fch6UY4yv2TmLOY05hFYoFkWjg2CeIm5ipmGXMbsxojqVeQeeJ4
                    FvM85uuYJ4nESjItIFscFzF/xbyNeZc/HyCpgbS5chQcP8S8iPk2v9d6XifVOleNAuOXmJeJ4u9q
                    29nZYua5rZSV4/uYH2O+i3mav2cFmU5llbiMeZ07xia3muv82d15ZLzFLHJbeZ44XuQfWAAyuRWk
                    gPgq75/HvMltZllvM+OrmDYxnOXK8Sz/CCDTansGaXMl+T3m57w9z5/1YyCz0WVulzAWeXjVtA6q
                    89wtygLwTS4GZ9Vxosym2/PgZnTp24y+r4dfUy0C5dz5OOZR3h9csc49V0ePZAtl+/VgIQBE9Svo
                    OwGi2aFjBCA6GCACRJ902bsdQDRAsX3vpd+HBJDjxlFglJfVyyun9dv9G0C0SRDlPZnytv8yoawB
                    0SwhbD8TUt6kO08sg1UEkOOtz22lrBzvE8q1FUTjM8hNIrlKMD0gmo2uYFbVlUzvKkbjlcTrIPq8
                    ABEgAkSACBABIkAEiACRABEgAkSACBABIkAEiACRABEgAkSACBABIkAEiACRABEgAkSACBABIkAE
                    iACRABEgAkSACBABIkAEiACRABEgAkSACBABIkAEiACRABEgAkSACBABIkAEiACRABEgAkSACBAB
                    IkAEiACRABEgAkSACBABIkAEiACRABEgAkSACBABIkAEiASIABEgAkSACBABIkAEiASIABEgAkSA
                    CBABIkAEiASIABEgAkSACBABIkAEiASIABEgAkSACBABoodcA4j2oZjvmQYQ1UC6mJOcNr/fAAJH
                    kzgexTyJOauQWEH0L4STxPFlzBeJpKtdAHLcFygniaLgeBpzmkDuthlAjnuLaSskp9Xq4Qyiu0Nq
                    mzDa6pDqDKKd1WR+3z4kNaNbQPTpJ1kJEAEiQPQ/takGEA1Q9DHrvN1B0h2Q1I+m8ZxOqoJiFXMb
                    cx1zk/cHSLo9OOoHLWcfX4pdADK51aMAeR/zLuci/+frQ0BW+UvlAW9iHieShed0ct3k//nXmFcx
                    f8Zc5uJwt4rUQPrqQb/NPr7DV1SVt4NbK8jkVpAC4TxxvIz5I+ZDtc0MVpDtkrNMST/lL5fPCZzO
                    9nwUTQ8eyCr/328TyetcQVb3bTFlBbnKB6wSys7nAzQZIH2uIpd5FvmQO0h/3wrSJ4yLaqtpXQpP
                    Hsn2ouR2fEDdd0hdVw+6snIczWsh4/nP10FmYBwdlL11n/MgHU/OFzrYPwIMACDb/bePF9mOAAAA
                    AElFTkSuQmCC" transform="matrix(1 0 0 1 10.1318 8.1318)">
                      </image>
                      <g>
                    
                      <image style="overflow:visible;opacity:0.4;" width="123" height="162" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAACjCAYAAABIdnpEAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
                    GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZNJREFUeNrs1dFtwjAYhdGkuM8w
                    AgO0A3SaztaZygCskOcQuRfpT5UZzPmkK8OrjwzzNE1zdqpT49Wzrc6pZefsWif08bCX7F5nb4X9
                    nX3WS9c4PV/2b/aT3bLH/sI/sq/s3R0N1Vqv/P/Xu9WHVtjAx6sd/6rf3MdrBRy4gAu4gAu4gAu4
                    gAu4gAu4gAs4cAEXcAEXcAEXcAEXcAEXcAEXcAEHLuACLuACLuACLuACLuACLuACDlzABVzABVzA
                    BVzABVzABVzABVzAgQu4gAu4gAu4gAu4gAu4gAu4gAMXcAEXcAEXcAEXcAEXcAEXcAEXcOACLuAC
                    LuACLuACLuACLuACLuACDlzABVzABVzABVzABVzABVzABRy4gAu4gAu4gAu4gAu4gAu4gAu4gAMX
                    cAEXcAEXcAEXcAEXcAEXcAEHLuACLuACLuACLuACLuACLuACLuDABVyj1bKePbLVdQzXWrb9CL5k
                    t2zOTu5oqLayXXb0J/Ilu2bn+q5x6oV939Hnw8uGPS76dvxZ1wv1J8AA5BkkSmV7SpUAAAAASUVO
                    RK5CYII=" transform="matrix(1 0 0 1 16.0527 13.0527)">
                      </image>
                      <g>
                      <rect id="win1" x="15.8" y="13.6" class="st0" width="118.5" height="156.4"/>
                      </g>
                      </g>
                    </g>
                    <g>
                    
                      <image style="overflow:visible;opacity:0.2;" width="163" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAADJCAYAAACt35nFAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
                    GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADlpJREFUeNrsnYlupDoURG0gM///
                    uwnYT5HSkp/nLmVj6ABVEmp6STJtDnUXGyYEiqIoiqIoimpT5L/1Uco8yISN0F4ABAJIQN8ORiS4
                    lwct3wHIeOJnqP0w5XeCGd8EYhz4M9QY0HLHz+UrANkCVSSop4LXAl1+B5jxDSAi+957BHI/kHnQ
                    e0PBjAfDGEEIYyOsBHIskFl5RPeHQRkPBvG1j0CIwkkY+8FEIETgPAzMOBhGDTwLuj1gEkgcyBYA
                    kfcQMJuhXA7KIaMBXb3fCyeBHAdkVp5HxwHL9+M7c8jo5IoIeNF5z4OUUO6DUQJQ2yxwrXDe7JLx
                    QBgRCJFNAxNJG55cxGiwtICYGuAcAuXekO3BqG0T+JoGZ3Bc886AIlV0D4xJeB4NKKXQHYFQPxRI
                    78AjAE7OowcnklsSSD1P9NwwFVBJUCYgn5SOQT7aIWMHiFO1L73mwfl0IJEw7QGZDBBTAWINZfo5
                    HhKYdXHT5ZLLTndEYNQg/N5mAM4aSrTYIZB+aE4CiN/bVh3LVP2NF5gtbgkBuux0Rw1OC8ISxBmE
                    syWvfFphY1XUXlhOAoilI27CeL8g9KDsagUtA91RglKDcAZem5w8s2dm5+5Aag6JgjgVEL7A3Izx
                    TNV72XFEF9Cl0x1b88ZZ2LTXETDpknivMRthudzfqvEu3XEzQvNUFUK7XHLpdEcP0smBcTGeL0ZY
                    16B8qkNmMFRnAcStgvF7W5UoZP3t5Hy2ySX3tn1awnUJ3FLtL8J7dSifhGLnyVD2wFgCmCoQXw65
                    NgKZq8/ms9s+3izMZITrRdg+hNe8EN7So7w7kNrsSVLcUdpmxR2j8nfLbQr/NsUPC9noNF0rjB/O
                    42yAibrkk4G03HEVnHEGYdT+ziTAaIGpQnpEY9xq9ZRg/ikgLDcpjKOhm0D6oboEcTWcMQoQpmLs
                    678Vw5umDpFFE1YxUzrhHwFIzS0nAEoUyHgx6HqATAqQJYxfjjui89311r00ba9DRtAhSyA/Kmf8
                    Uz1KbqmF7jJNCDdvA3kN8GC0eTRnnH+g9GCs4S6PrQdlCINyyJaV2haYWg75UUH5pwHKvWH76g5p
                    rW+Ueo513vhyx8kJ0RKMyYDQq6xd1+ytsrXwPYE9yEWBUQJTyie1sB1u3gJCZmUyEKpXIVQHJWfc
                    imO3KREwAWF7eA5p9fu8sK3BWEP5V3FKyyWjAeUdixuk/1g3wVfBHa0CRiqEJCgtl+xaIzkih0SL
                    G60H6TnlIkD5+r11qyk8AEoPyFfIlprfUqiuXXFz+pUvKL0pZG9eeziQobHtMzWE7r9VsSM1zSUo
                    73z9DTJ3LcGYihA9G3mj1h6ajbbbFPwZnUPbPsGxaG8+e3JC9weQS0otIKnafhqQKehz1haMtTN+
                    FPtLlW8iU7iWUw4BMjYC2rLQQgvdH0YuiVTbd26QayE7GQXNrDhaWbjUIGors7ypW4SnPNIhtYo7
                    BHu1uLbiZ3Ea5n8cIL2w/YQq28sfJ6N4KWHUZshqEK1ictdY75mp8a449C5d8KCsXRPNI8ONXdK7
                    ZkYCclXCtAUjkjd6BtAVthcwTHvko5e+TsFepKtV4QvY/nlSyLZyyFlwxmi0dRAQW6+l7wrfI0K2
                    N2tjXW3ohXBtqZoUSp7gkCiQW9CnA2sQN2fSQbvwrgXCaBRnw9s+IdjTR+gqIGtVubVe0gshd6i0
                    W1o+yYFxLkDcwv8XWEwNFTViTqe0fVrzTHQBhnTZggfr9JDWD9LymUAYvWuXekP12/qQo8BEoPQ2
                    dCnaHcK2BKV0cb41AzMKxtY07hQgvbWRVgVuVeJRGSgJRHQp2tWhtGCsb3uitXfqeeg52HcR8e4c
                    4l31eXrbxzvQscEprTtdzMCZ/JRK21rhI91hIgd9xiwG/zY2yDrTALR+Trv7GeKarWEcuQGVB+Rd
                    HbKe7ovBvitZMirk1pt8eQ55iRyyJbR79wTSzuT6tbvBKPXrogBlKr5/Dvo9klA3tNYsHKblDQNr
                    JcG9Yf4JU4feCuypckTLIRHwNGMJVwGyZXIdveygBdYQ7j+X7eVjMbT9DxgBgPRULScMYMtVgLFx
                    INH37gJlDvb10hEA0xtjz2ysCZDLhGzU3ULjQKItpz2O/pvaPfWF+FJeGTtO7NYwfpscEg33LQNp
                    FTBXd8hoVNs5+PdaanG11ob3IeM5Hdj2Gfk/PPQk16cm4ycC2tJbPTS8Xq3tsyestxyE2DFAVwI0
                    A98lA+nJoYsifqtDHlmd97rprx38HS4UD/qekUDuCwWt4evq4XrUWPzak3O66IHhfyd307GafslZ
                    H0/6O3cA7OrH4nYO+TQIH/X9pkBRBJKiCCRFICmKQFIEkqIIJEUgKYpAUgSSoggkRRFIikBSFIGk
                    CCRFEUiKQFIUgaQIJEURSIpAUhSBpCgCSRFIiiKQFIGkKAJJEUiKIpAUgaQoAkkRSIoikBRFICkC
                    SVEEkiKQFEUgKQJJUQSSIpAURSApAklRBJKiCCRFICmKQFIEkqIIJEUgKYpAUgSSoggkRSApikBS
                    FIGkCCRFEUiKQFIUgaQIJEURSIpAUhSBpAgkRRFIiiKQFIGkKAJJEUiKIpAUgaQoAkkRSIoikBSB
                    pCgCSVEEkiKQFHUhIHP1eMTvvqvyhY4FHfKmcN79JLskkFk4m3OgpLHIVxub6Zee9chA5kb3yDcB
                    bsRYaGOcCaQ/GLnhYHjOmS8IpgVOVr5/63f/NWOynDB4e36+J/x8fyY+PRcDTtoRYzH8BJ9OPKv3
                    AJKNHDIbYf+qrtiSPwdjLLKRW+49SQ8Z0+XkMzQrWwAGMgNgloqVW0rvXzVv1MbTArNljK3fe6mQ
                    vTcpbxnIXIXoOlSXr0sAXtE1vXzROolbxvhtKc5yMHDZCS17HLL+XdEYuHiTsO1B6IXoHodsOaaX
                    ckgE2uy44eu19ANZdAavpdC5Wvguv3Mywm12QPNC8qkn8pk5JJr35AK6JDxPP8VYCWYuXtcAvDKU
                    GRjPJOynal8a49x4fC7Z9vFCsfelkwFm7ZCp6BjUzhmr/PEuzXENHg1AC9DU4KbhaEiXHcCNqK7R
                    s7t2yFhsda4Yhf0rVda9DlmPkbRlBcZWOPMBrAx1yAw4pOeG5aBtxfPtZ5t/HqMCZC5C9p1gRKFM
                    ApSbMpav/SwAm0AYe0E9DEjkH4OEY2kQUzWQSYCx/ndILZ54IyCDU4xoMG4KmNIYt0KJtO7eXtSg
                    VZ4UUjbh8bVNBpCpyiE1KK8KZgZyyRKmzdk8KFND5f7rixoEzFYYVwHGXITpWAFLIO1tVeBMDXAO
                    70GOziHRyk8CcRUe559tMmB8OWMJZQCgvGulrYXs1dis0J6MIvMQMJfGQYgGiK2uqJ21CIypKHSe
                    BGQGHVID8utnW6vXNwFOr0L3Gu1dFfdifPEI9hlDR2jWwsdaADkJYfj1O+ei6p6dkH1HIL2CsU57
                    Shi/iueaUyYATLSn3DRHvgwYIC2E1GeV5oZ1SPkS4JJgfEFbA3lXGBEoUSA/HTBXJYxrPcswqvVz
                    VB8yAWEagVEK00sF5JPyx5Y88gVRnTN+VmAiUCJtodP6kFnp+7W0dzajen4NyKw0vbPSJJ+AcH2n
                    5nhLpS055Ka45KcQzlfjmLUu5HDD9FFtn5b8sQZxApzx5Y6bAuP0cCCTAaXmkp8CkHXh47WEhvYk
                    l4EA9hQz88+Xtxre35/9KH7uSwnX8QFFDZpDSr3dtQrPn8L2JYTv0jFbi5vDgZRWZ6PhWmrpTMGe
                    my5hlHJH63c8qcoOYHttVQqcTyN0r0afcs86y91A1jCizigNigdiUmBcBBgtd9RAjBcEEC1qMjD5
                    sCpAfhph2wrf6FUAh4VspNBJRb43FSBaMGp5o+eO0iqfJ6z2kVpv1qofzSW/gNBtFTYpDLq8dgGh
                    01ZgozMyJZQRCNNWqLbyR7Tdc3WHRFo/2cnfNSil5vmm5JFI6PZSjt0OWU4jerljVIoOa256q9xx
                    NtyxJ1w/oRepGUOqAPtSwPRmcpA88pQFupJrapcWxKCvZYxKUVQDORdQejASSHz9gDYpocGouSO6
                    XjIfBaRV6KQCwhcgGxCiJRhXwB0jgXSBRBbtrgKYqxCykYUX3bkjCqSWR9ZhOwBQWr1MyRlXAMa6
                    mLnzHHZLPxJxybo/iS5T81aYh+CvAsojHdIC04LSgvG1aKIEEili4kNhbIHSapan8O9qK2tZmgWj
                    1nM8LYcMzoyBB4YEZLmkrAfGu7V69rSBLCi1lfnaSh8rZHctM9sDpNby8SDzgJBCSR2itflqNG98
                    KpBWGyiHfy9bsK67GbE+EoZzVMgO4d87SJRgStBO1Vk7hX9XgXvOqMH4lJBthW0ESut6Jglayxlb
                    VpDvBhK5NYl0/50AADmF/18bs+2E8clAIlW3tV5Vg69npU/XfYJGTB1mJRxPBZTW4JTgSfvIbMzV
                    56z3Qmg5pOaU1i1WPAi9UN3ljq1AWi7pQWn1HiUn1PZbgbwjlK3TiSH038IGueqw9UYChzhkDaPm
                    lqmAKlWhOlftIauCJpB9QKIhXLtWpueGVLsa5KPaPohblnclm4rPR6FvqUGIFjBPziE9IFHH7Lll
                    3+62T8+B0woI6TEqz1EX7IGRQO6DEl0skZ0U4TQgESiDAWNwAIwA6E+Fb3SPMnSA13qv8rwHrBFQ
                    Wm6JOB9BPA9KBFb0vd0wjgbSCqc94DFPPC+3RB5DaF8wcSqQaA4XQQf1gH5KFX1GFY7C6X0OzWFP
                    A7IHTARYAnkukAiEh4J4xMFEoekBj0COBzKAcKIg7obxqIPZAk8kfL8W1DwA9GbNBw5AD1gE7j1A
                    9obg4bd0nk8YiDjoM9SxQLZ8Lr8Tlnf+LYL6fkBPAfHdB5yg3Rvcy4NBQB8K4JVBILQXh42iKIqi
                    qNvoPwEGAJRUD552cwm5AAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 -6.2095 -8.2095)">
                      </image>
                      <g>
                      <rect id="win2" x="23.9" y="21.7" class="st0" width="102.2" height="140.2"/>
                      </g>
                    </g>
                    <g>
                      <polygon id="win3" class="st0" points="126.1,88.5 78.2,88.5 78.2,21.7 71.8,21.7 71.8,88.5 23.9,88.5 23.9,95 71.8,95 71.8,161.9 
                      78.2,161.9 78.2,95 126.1,95 "/>
                    </g>
                    <g>
                    
                      <image style="overflow:visible;opacity:0.2;" width="106" height="143" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAACQCAYAAAAP6pXWAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
                    GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXJJREFUeNrs3bENwjAURdEERUxB
                    RcVyTMMsmQUqKqZIhYOcCFkMgJ/OlaxI6czBCVR/HHI6lnWq17WlrFe96s86lzWXda9rrvdimsJO
                    1opzae7FdHAgYQkWLMESLFiCJViwBEuwYAmWYMESLMGCJViCBUuwBAuWYAkWLMESLFiCJViwBEuw
                    YAmWYMESLMGCJViCBUuwBAuWYAkWLMESLFiCJViwBEuwYAmWYMESLMHqvHWMYDvYstfOzR62sYK9
                    tw8aHeuGbgEbS52m+izrul6n4fdgy4RSTta2F++s3t5ZSz1qCd++1MfgZw9j2A+M73fv/qxP+YGR
                    dLKG5hRt+3r4nyVYggVLsAQLlmAJFizBEixYgiVYsARLsGAJlmDBEizBgiVYggVLsGD5CGAJFizB
                    EixYgiVYsARLsGAJlmDBEizBgiVYggVLsAQLlmAJFizBEixYgiVYsARLsKKbgvbSTtjbZyWmNAbt
                    JXVAp3rsLcAALmgqh9cxfMgAAAAASUVORK5CYII=" transform="matrix(1 0 0 1 22.0264 20.0264)">
                      </image>
                      <g>
                      <polygon id="win4" class="st0" points="126.1,90.2 76.6,90.2 76.6,21.7 73.4,21.7 73.4,90.2 23.9,90.2 23.9,93.4 73.4,93.4 73.4,161.9 
                      76.6,161.9 76.6,93.4 126.1,93.4 "/>
                      </g>
                    </g>
                    <g>
                      <g>
                    
                      <image style="overflow:visible;opacity:0.5;" width="57" height="76" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABNCAYAAAD3nHdRAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
                    GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhRJREFUeNrs3EtPAjEUBeDOTEfD
                    w1dkZyIbV/7/v+PChbrwFV+IA0O9N55Kp4y4bcOZ5IRgkPTjlsLmYMyOXMWW+0WmJhfd9sI0paTC
                    bZkJ2CErSYvbVYgtIqSV7EkGkn1JDXSRAXIpaSSfkjnutx5rg38ogTyUTCQnkhGwKU/WIxX3KnmU
                    PEk+wqmG0AqTVOSFZCo5xd+qxCe6APJWchVMd+kfZIOtW2K76iTPJZeSM8kYj0t1ojq1L8kDduA7
                    pvqCKeu6Xbx1azx4AuQUW7lOHKrvyyG26xEG1jlbbHTqVkANMElFHmcA3QN2BKSNzxXb8znqP14s
                    gDWeyCQMrYNPiN6D0275ElEESfkLRLFlzZ335U5chBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQS
                    SiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhGZ1xQUfZ7ql0zApV7ZWwZr9+v+EhoVT
                    rSlqg0/7XlrXyqGEp2mw9jbGxtAlgFpJ1JriEE9QJ7wrHdZ4L3mWzIDtVJ9t9Mo0QN5JDsxPTVEb
                    fFXiE22AvMaAZhjaBtRh3PrKaMlUW7VaOPVdzNSrzwsMRdd+I3nD337fr2FLzxdldbtqb3Rs1l3M
                    InFoC9gMSB3S3Kwb/Bs/T1CZdVk27GOmfvkT1x+k4YHkjOn/wYm+mEywfTHmH0Tuv6yxm9e3AAMA
                    mziNabJOx4oAAAAASUVORK5CYII=" transform="matrix(1 0 0 1 20.1318 18.1318)">
                      </image>
                      <g>
                      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="23.9271" y1="16.5173" x2="120.6429" y2="170.7865">
                      <stop  offset="0" style="stop-color:#C3EFFF"/>
                      <stop  offset="0.1783" style="stop-color:#C5F0FF"/>
                      <stop  offset="0.2425" style="stop-color:#CCF1FF"/>
                      <stop  offset="0.2881" style="stop-color:#D7F4FF"/>
                      <stop  offset="0.3025" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.3047" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.3114" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.33" style="stop-color:#D0F2FF"/>
                      <stop  offset="0.3775" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.3844" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.4057" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.465" style="stop-color:#D0F2FF"/>
                      <stop  offset="0.5425" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.5474" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.5626" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.605" style="stop-color:#D0F2FF"/>
                      </linearGradient>
                      <rect x="25.5" y="23.3" class="st1" width="46.2" height="65.2"/>
                      </g>
                      </g>
                      <g>
                    
                      <image style="overflow:visible;opacity:0.5;" width="57" height="76" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABNCAYAAAD3nHdRAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
                    GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhRJREFUeNrs3EtPAjEUBeDOTEfD
                    w1dkZyIbV/7/v+PChbrwFV+IA0O9N55Kp4y4bcOZ5IRgkPTjlsLmYMyOXMWW+0WmJhfd9sI0paTC
                    bZkJ2CErSYvbVYgtIqSV7EkGkn1JDXSRAXIpaSSfkjnutx5rg38ogTyUTCQnkhGwKU/WIxX3KnmU
                    PEk+wqmG0AqTVOSFZCo5xd+qxCe6APJWchVMd+kfZIOtW2K76iTPJZeSM8kYj0t1ojq1L8kDduA7
                    pvqCKeu6Xbx1azx4AuQUW7lOHKrvyyG26xEG1jlbbHTqVkANMElFHmcA3QN2BKSNzxXb8znqP14s
                    gDWeyCQMrYNPiN6D0275ElEESfkLRLFlzZ335U5chBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQS
                    SiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhGZ1xQUfZ7ql0zApV7ZWwZr9+v+EhoVT
                    rSlqg0/7XlrXyqGEp2mw9jbGxtAlgFpJ1JriEE9QJ7wrHdZ4L3mWzIDtVJ9t9Mo0QN5JDsxPTVEb
                    fFXiE22AvMaAZhjaBtRh3PrKaMlUW7VaOPVdzNSrzwsMRdd+I3nD337fr2FLzxdldbtqb3Rs1l3M
                    InFoC9gMSB3S3Kwb/Bs/T1CZdVk27GOmfvkT1x+k4YHkjOn/wYm+mEywfTHmH0Tuv6yxm9e3AAMA
                    mziNabJOx4oAAAAASUVORK5CYII=" transform="matrix(1 0 0 1 73.1318 18.1318)">
                      </image>
                      <g>
                      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="61.7863" y1="-7.2177" x2="158.5021" y2="147.0515">
                      <stop  offset="0" style="stop-color:#C3EFFF"/>
                      <stop  offset="0.1783" style="stop-color:#C5F0FF"/>
                      <stop  offset="0.2425" style="stop-color:#CCF1FF"/>
                      <stop  offset="0.2881" style="stop-color:#D7F4FF"/>
                      <stop  offset="0.3025" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.3047" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.3114" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.33" style="stop-color:#D0F2FF"/>
                      <stop  offset="0.3775" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.3844" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.4057" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.465" style="stop-color:#D0F2FF"/>
                      <stop  offset="0.5425" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.5474" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.5626" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.605" style="stop-color:#D0F2FF"/>
                      </linearGradient>
                      <rect x="78.2" y="23.3" class="st2" width="46.2" height="65.2"/>
                      </g>
                      </g>
                      <g>
                    
                      <image style="overflow:visible;opacity:0.5;" width="57" height="76" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABNCAYAAAD3nHdRAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
                    GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhVJREFUeNrs3ElPwzAQBWA7cUBd
                    2ERvSPTCif//dzhwAA5sYislbWpmxDN13BSujvosPQWqtPLXcZxeJta0h93yd5+GT46dME0hKXEs
                    egL2yErS4LiKsTZBOsmeZCDZl1RA2x4gl5Ja8imZ4/8mYF30hgLIQ8lEciIZAZtzZQNSca+SR8mT
                    5COuagwtUUlFXkimklO8VmZe0QWQt5KrqLrLcJKLlm6B5aqVPJdcSs4kY5yXa0W1al+SB6zAd1T1
                    BVXWeft06VY4eQLkFEu5yhyq1+UQy/UIBWvtLS7ZdUugBqikIo97AN0DdgSkS/cV13EfDbcXB2CF
                    DzIZQ6voDtG5cbqON6a3HJv5Dwj7x5xb1+VODEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWU
                    UEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJzXGknUzetLtr4+Tcm7aK5hzmvxUad9Zq
                    P6a2Kmpjm/al9aHbUFNj7k2KTaFLALX3Uvsxh/iAKuNV6THHe8mzZAZsq8fbJd9MDeSd5MD89GNq
                    q2KZeUVrIK9RoBmKtgH1KLd+M9pNq+3D2lkbmk5z7/FeoCg69xvJG177vV7jdsTQEazLVRtkx2bd
                    dGozhzaAzYDUIs3N+lEFG89hKM26KzhuPM19hB03bKTxhuRNR5XslpieYLtizD+Ivj9CZDfHtwAD
                    AB+6jWvxXbTZAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 20.1318 90.1318)">
                      </image>
                      <g>
                      <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-8.3524" y1="36.7543" x2="88.3633" y2="191.0235">
                      <stop  offset="0" style="stop-color:#C3EFFF"/>
                      <stop  offset="0.1783" style="stop-color:#C5F0FF"/>
                      <stop  offset="0.2425" style="stop-color:#CCF1FF"/>
                      <stop  offset="0.2881" style="stop-color:#D7F4FF"/>
                      <stop  offset="0.3025" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.3047" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.3114" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.33" style="stop-color:#D0F2FF"/>
                      <stop  offset="0.3775" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.3844" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.4057" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.465" style="stop-color:#D0F2FF"/>
                      <stop  offset="0.5425" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.5474" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.5626" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.605" style="stop-color:#D0F2FF"/>
                      </linearGradient>
                      <rect x="25.5" y="95" class="st3" width="46.2" height="65.2"/>
                      </g>
                      </g>
                      <g>
                    
                      <image style="overflow:visible;opacity:0.5;" width="57" height="76" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAABNCAYAAAD3nHdRAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
                    GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhVJREFUeNrs3ElPwzAQBWA7cUBd
                    2ERvSPTCif//dzhwAA5sYislbWpmxDN13BSujvosPQWqtPLXcZxeJta0h93yd5+GT46dME0hKXEs
                    egL2yErS4LiKsTZBOsmeZCDZl1RA2x4gl5Ja8imZ4/8mYF30hgLIQ8lEciIZAZtzZQNSca+SR8mT
                    5COuagwtUUlFXkimklO8VmZe0QWQt5KrqLrLcJKLlm6B5aqVPJdcSs4kY5yXa0W1al+SB6zAd1T1
                    BVXWeft06VY4eQLkFEu5yhyq1+UQy/UIBWvtLS7ZdUugBqikIo97AN0DdgSkS/cV13EfDbcXB2CF
                    DzIZQ6voDtG5cbqON6a3HJv5Dwj7x5xb1+VODEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWU
                    UEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJzXGknUzetLtr4+Tcm7aK5hzmvxUad9Zq
                    P6a2Kmpjm/al9aHbUFNj7k2KTaFLALX3Uvsxh/iAKuNV6THHe8mzZAZsq8fbJd9MDeSd5MD89GNq
                    q2KZeUVrIK9RoBmKtgH1KLd+M9pNq+3D2lkbmk5z7/FeoCg69xvJG177vV7jdsTQEazLVRtkx2bd
                    dGozhzaAzYDUIs3N+lEFG89hKM26KzhuPM19hB03bKTxhuRNR5XslpieYLtizD+Ivj9CZDfHtwAD
                    AB+6jWvxXbTZAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 73.1318 90.1318)">
                      </image>
                      <g>
                      <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="29.5067" y1="13.0193" x2="126.2225" y2="167.2885">
                      <stop  offset="0" style="stop-color:#C3EFFF"/>
                      <stop  offset="0.1783" style="stop-color:#C5F0FF"/>
                      <stop  offset="0.2425" style="stop-color:#CCF1FF"/>
                      <stop  offset="0.2881" style="stop-color:#D7F4FF"/>
                      <stop  offset="0.3025" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.3047" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.3114" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.33" style="stop-color:#D0F2FF"/>
                      <stop  offset="0.3775" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.3844" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.4057" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.465" style="stop-color:#D0F2FF"/>
                      <stop  offset="0.5425" style="stop-color:#DDF6FF"/>
                      <stop  offset="0.5474" style="stop-color:#D9F5FF"/>
                      <stop  offset="0.5626" style="stop-color:#D2F3FF"/>
                      <stop  offset="0.605" style="stop-color:#D0F2FF"/>
                      </linearGradient>
                      <rect x="78.2" y="95" class="st4" width="46.2" height="65.2"/>
                      </g>
                      </g>
                    </g>
                    </svg>
                    
                    
                    
                    
                    
                    
                    </body>
                    </html>
                    
                    • 7. Re: Automatically create 2d drawings
                      CarlosCanto Adobe Community Professional & MVP

                      love them windows!!

                      • 8. Re: Automatically create 2d drawings
                        Qwertyfly... Level 4

                        cheap plastic imports.

                        • 9. Re: Automatically create 2d drawings
                          benganv2955966 Level 1

                          Wow thanks! Looks amazing!

                          We sell PVC, wood and wood-alu but he thought those would be a great to start with! Busy with some other things atm. I have some very basic coding knowledge so I'll have to play around with the code for a while, then I might come back to you! Anyway thanks a lot! That solution would be a lot better than having to create hundreds of images!

                          • 10. Re: Automatically create 2d drawings
                            Qwertyfly... Level 4

                            The SVG does not all need to be vector.

                            if we use a Photo of a White Window, you could make the white transparent in the image and have the color change happen to a photo.

                            the SVG in my example was a direct save from illy,

                            other then a few html tags and a random color generator.

                            all I did was add a few id tags to the svg code against the items I wanted to change.