Automatically create 2d drawings

Report · Mar 27, 2017

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?

Report · Mar 28, 2017

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 );
}

Report · Mar 28, 2017

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?

Report · Mar 28, 2017

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.

Report · Mar 28, 2017

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.

Report · Mar 28, 2017

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

Report · Mar 28, 2017

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,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
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>

Report · Mar 28, 2017

love them windows!!

Report · Mar 29, 2017

cheap plastic imports.

Report · Mar 29, 2017

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!

Report · Mar 29, 2017

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.

Adobe Community

Automatically create 2d drawings

Explore related tutorials & articles