Save responsive svg image as bitmap .png on a submit.

"[email protected] [svg-developers]" <[email protected]> 01 Dec 2016 11:26:00 -0800
Newsgroups gmane.text.xml.svg.devel
Message-ID <[email protected]>
--9nlWnTS9ocNmxdhsK3FKVLWiM6a5jwOaA8HvrLV
Content-Transfer-Encoding: base64
Content-Type: text/plain; charset="UTF-8"

V2UgaGF2ZSBhIGR5bmFtaWMgY2xpY2thYmxlIC5zdmcgaW1hZ2UuICBUaGUgdXNlciBjbGlja3Mg
b24gYW4gc2VjdGlvbiBhbmQgdGhlIHRleHQgZGF0YSBpcyBhZGRlZCB0byB0aGUgZGF0YWJhc2Ug
b24gc3VibWl0LiAgIA0KIA0KDQogVGhlcmUgaXMgYSBuZXcgcmVxdWlyZW1lbnQgdGhhdCB0aGV5
IHdhcyB0byBjb252ZXJ0IHRoZSBpbWFnZSB0byBiaXRtYXAgYW5kIHNhdmUgaXQgb24gYSBjbGlj
ayBldmVudC4gICBXZSBoYXZlIGl0IHdvcmtpbmcgYnV0IGl0IGlzIG5vIGxvbmdlciByZXNwb25z
aXZlLiANCiANCg0KIFRoaXMgaXMgdGhlIGhlYWRlciBtYXR0ZXIgSSB1c2VyIGZvciByZXNwb25z
aXZlIGFuZCBzaXplcyB2ZXJ5IHdlbGwuDQogPHN2ZyBjbGFzcz0icGFzc19kaWFncmFtIiB2ZXJz
aW9uPSIxLjEiIGlkPSJMYXllcl8xIiANCiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9z
dmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9
IjBweCIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNzAwIDkyMC45
Ig0KIA0KIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcwMCA5MjAuOSIgIHByZXNlcnZlQXNw
ZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPg0KIA0KDQogVGhlIGVuZ2luZWVyIG5lZWRzIHRvIGFk
ZCBhIHdpZHRoIGFuZCBoZWlnaHQgdG8gY3JlYXRlIGEgYml0bWFwICB3aGljaCBtZWFucyB0aGF0
IGl0IG5vIGxvbmdlciBpcyByZXNwb25zaXZlLiANCiANCg0KICA8c3ZnIGNsYXNzPSJwYXNzX2Rp
YWdyYW0iIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIA0KIHhtbG5zPSJodHRwOi8vd3d3Lncz
Lm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsi
IHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjAwcHgiIGhlaWdodD0iNTAwcHgiIHZpZXdCb3g9IjAg
MCA3MDAgOTIwLjkiDQogDQogZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNzAwIDkyMC45IiAg
cHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+DQogDQoNCiBEb2VzIGFueW9uZSBo
YXZlIGEgc29sdXRpb24/IA0KIA0KDQogVGhhbmsgeW91DQogDQoNCiBOYW5jeQ0KIA0KDQo=


--9nlWnTS9ocNmxdhsK3FKVLWiM6a5jwOaA8HvrLV
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 7bit





<head>

<style type="text/css">
<!--

/* start of attachment style */
       .ygrp-photo-title{
         clear: both;
         font-size: smaller;
         height: 15px;
         overflow: hidden;
         text-align: center;
         width: 75px;
       }
       div.ygrp-photo{
         background-position: center;
         background-repeat: no-repeat;
         background-color: white;
         border: 1px solid black;
         height: 62px;
         width: 62px;
       }

       div.photo-title 
         a,
         div.photo-title a:active,
         div.photo-title a:hover,
         div.photo-title a:visited {
           text-decoration: none; 
       }

       div.attach-table div.attach-row {
         clear: both;
       }

       div.attach-table div.attach-row div {
         float: left;
         /* margin: 2px;*/
       }

       p {
         clear: both;
         padding: 15px 0 3px 0;
	 overflow: hidden;
       }

       div.ygrp-file {
         width: 30px;
         valign: middle;
       }
       div.attach-table div.attach-row div div a {
         text-decoration: none;
       }

       div.attach-table div.attach-row div div span {
         font-weight: normal;
       }

       div.ygrp-file-title {
         font-weight: bold;
       }
 /* end of attachment style */
        -->
        </style>
        </head>
<html>
<head>
<style type="text/css">
<!--
#ygrp-mkp {
  border: 1px solid #d8d8d8;
  font-family: Arial;
  margin: 10px 0;
  padding: 0 10px;
}

#ygrp-mkp hr {
  border: 1px solid #d8d8d8;
}

#ygrp-mkp #hd {
  color: #628c2a;
  font-size: 85%;
  font-weight: 700;
  line-height: 122%;
  margin: 10px 0;
}

#ygrp-mkp #ads {
  margin-bottom: 10px;
}

#ygrp-mkp .ad {
  padding: 0 0;
}

#ygrp-mkp .ad p {
  margin: 0;
}

#ygrp-mkp .ad a {
  color: #0000ff;
  text-decoration: none;
}
-->
</style>
</head>
<body>



<!-- |**|begin egp html banner|**| -->

<br><br>

<!-- |**|end egp html banner|**| -->


<p><span>We have a dynamic clickable .svg image. &nbsp;The user clicks on an section and the text data is added to the database on submit. &nbsp;&nbsp;</span></p><p><span><br></span></p><p><span>There is a new requirement that they was to convert the image to bitmap and save it on a click event. &nbsp; We have it working but it is no longer responsive.&nbsp;</span></p><p><span><br></span></p><p><span>This is the header matter I user for responsive and sizes very well.</span></p><p>&lt;svg class=&quot;pass_diagram&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot;&nbsp;</p><p><span class="Apple-tab-span" style="white-space:pre;">	</span> xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;200px&q
 uot; height=&quot;500px&quot; viewBox=&quot;0 0 700 920.9&quot;</p><p><span></span></p><p><span class="Apple-tab-span" style="white-space:pre;">	</span> enable-background=&quot;new 0 0 700 920.9&quot; &nbsp;preserveAspectRatio=&quot;xMidYMid meet&quot;&gt;</p><p><br></p><p>The engineer needs to add a width and height to create a bitmap &nbsp;which means that it no longer is responsive.&nbsp;</p><p><span><br></span></p><p>&nbsp;&lt;svg class=&quot;pass_diagram&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot;&nbsp;</p><p><span class="Apple-tab-span" style="white-space:pre;">	</span> xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;200px&quot; height=&quot;500px&quot; viewBox=&quot;0 0 700 9
 20.9&quot;</p><p><span></span></p><p><span class="Apple-tab-span" style="white-space:pre;">	</span> enable-background=&quot;new 0 0 700 920.9&quot; &nbsp;preserveAspectRatio=&quot;xMidYMid meet&quot;&gt;</p><p><br></p><p>Does anyone have a solution?&nbsp;</p><p><br></p><p>Thank you</p><p><br></p><p>Nancy</p><p><span><br></span></p>



<!-- |**|begin egp html banner|**| -->

<br>


<br>

<!-- |**|end egp html banner|**| -->


<div width="1" style="color: white; clear: both;"/>__._,_.___</div>

      
  

    
    <div id="fromDMARC" style="clear:both; margin-top: 10px;">
         <hr style="height:2px ; border-width:0; color:#E3E3E3; background-color:#E3E3E3;">
         Posted by: [email protected]         <hr style="height:2px ; border-width:0; color:#E3E3E3; background-color:#E3E3E3;">
    </div>
<!-- Start Recommendations -->
<!-- End Recommendations -->


<!-- |**|begin egp html banner|**| -->

<br><br>
<tt>
-----<BR>
To unsubscribe send a message to: [email protected]<BR>
-or-<BR>
visit <a href="http://groups.yahoo.com/group/svg-developers">http://groups.yahoo.com/group/svg-developers</a> and click &quot;edit my membership&quot;<BR>
----</tt>
<br><br>

<!-- |**|end egp html banner|**| -->



<!-- |**|begin egp html banner|**| -->

  <img src="http://geo.yahoo.com/serv?s=97476590/grpId=1298421/grpspId=1706030390/msgId=66555/stime=1482994073" width="1" height="1"> <br>

<!-- |**|end egp html banner|**| -->

  
<!-- |**|begin egp html banner|**| -->

<br>



   
     
 
        <!-- |**|begin egp html banner|**| -->
        <div id="ygrp-vital" style="background-color: #f2f2f2; font-family: Verdana; font-size: 10px; margin-bottom: 10px; padding: 10px;">

        <span id="vithd" style="font-weight: bold; color: #333; text-transform: uppercase; "><a href="https://groups.yahoo.com/neo/groups/svg-developers/info;_ylc=X3oDMTJlNGZoaWM4BF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQ4Mjk5NDA3Mg--" style="text-decoration: none;">Visit Your Group</a></span>

     <ul style="list-style-type: none; margin: 0; padding: 0; display: inline;">
            <li style="border-right: 1px solid #000; font-weight: 700; display: inline; padding: 0 5px; margin-left: 0;">
      <span class="cat"><a href="https://groups.yahoo.com/neo/groups/svg-developers/members/all;_ylc=X3oDMTJmb2s1cHM1BF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzE0ODI5OTQwNzI-" style="text-decoration: none;">New Members</a></span>
      <span class="ct" style="color: #ff7900;">1</span>
    </li>
                                              </ul>
  </div>


<div id="ft" style="font-family: Arial; font-size: 11px; margin-top: 5px; padding: 0 2px 0 0; clear: both;">
  <a href="https://groups.yahoo.com/neo;_ylc=X3oDMTJkbzJvOWhuBF9TAzk3NDc2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxNDgyOTk0MDcz" style="float: left;"><img src="http://l.yimg.com/ru/static/images/yg/img/email/new_logo/logo-groups-137x15.png" height="15" width="137" alt="Yahoo! Groups" style="border: 0;"/></a>
  <div style="color: #747575; float: right;"> &bull; <a href="https://info.yahoo.com/privacy/us/yahoo/groups/details.html" style="text-decoration: none;">Privacy</a> &bull; <a href="mailto:[email protected]?subject=Unsubscribe" style="text-decoration: none;">Unsubscribe</a> &bull; <a href="https://info.yahoo.com/legal/us/yahoo/utos/terms/" style="text-decoration: none;">Terms of Use</a> </div>
</div>

<!-- |**|end egp html banner|**| -->

  </div> <!-- ygrp-msg -->

   


  <br>

<!-- |**|end egp html banner|**| -->


<div style="color: white; clear: both;"/>__,_._,___</div>
</body>

</html>

--9nlWnTS9ocNmxdhsK3FKVLWiM6a5jwOaA8HvrLV--