Item: SVG to PNG
Rating: 3.4
Author: jspeer

0 Downloads
6 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

    <!--BULLETIN 5 STYLE-H -->



				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMinYMin meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" width="100%" class="bulletin style-h" id="svg-sign">
					<defs>
						<style type="text/css" id="svg-google"></style>
						<style type="text/css" id="svg-fonts"></style>
		<style type="text/css" ><![CDATA[

/*-- COLOR-A | Aquamarine ------------------------------------------------------------------------*/
.color-a,
.color-a.info-box.style-b.light > *:first-child,
.color-a.button.style-b:hover,
.color-a.button.style-b:focus,
.color-a.button.style-b:active,
.color-a.info-box.light.style-a:before {
  background-color: #19878b;
}
.color-a.dark,
.color-a.button:hover,
.color-a.button:focus,
.color-a.button:active,
.color-a.round-icon-button:hover,
.color-a.round-icon-button:active,
.color-a.round-icon-button:focus {
  background-color: #177a7d;
}
.color-a.darker {
  background-color: #146e71;
}
.color-a.darkest {
  background-color: #105557;
}
.color-a.light {
  color: #282a2e;
}
.color-a.light a,
.color-a.light a:hover,
.color-a.light a:active,
.color-a.light a:focus {
  color: #105557;
}
.color-a.light a.round-icon-button {
  color: #fff;
}
.color-a.button.style-e {
  color: #19878b;
}
.color-a,
.color-a a,
.color-a a:hover,
.color-a a:active,
.color-a a:focus,
.color-a a.round-icon-button {
  color: #fff;
}
.color-a.button.style-b img,
.color-a.ajax-loader,
.color-a > thead,
.color-a {
  border-color: #19878b;
}
.color-a > thead td,
.color-a > thead th,
.color-a > tbody td {
  border-color: rgba(25, 135, 139, 0.15);
}
.color-a.light {
  background-color: #c1dbdb;
}
.color-a.darkest {
  background-color: #105558;
}
.text-color-a,
.text-color-a.info-box.light a:not(.button),
.button.style-a .text-color-a.icon {
  color: #146e71;
}
.text-color-a.dark {
  color: #105557;
}
.text-color-a-light {
  color: #c1dbdb;
}
.fill-color-a {
  fill: #19878b;
}
.fill-color-a.dark {
  fill: #177a7d;
}
.fill-color-a.light {
  fill: #a7edef;
}
.fill-color-a-dark {
  fill: #105557;
}
.fill-color-a-dark.dark {
  fill: #0d4749;
}
.fill-color-a-dark.light {
  fill: #73e2e6;
}
/*-- COLOR-B | Maroon ----------------------------------------------------------------------------*/
.color-b,
.color-b.info-box.style-b.light > *:first-child,
.color-b.button.style-b:hover,
.color-b.button.style-b:focus,
.color-b.button.style-b:active,
.color-b.info-box.light.style-a:before {
  background-color: #830019;
}
.color-b.dark,
.color-b.button:hover,
.color-b.button:focus,
.color-b.button:active,
.color-b.round-icon-button:hover,
.color-b.round-icon-button:active,
.color-b.round-icon-button:focus {
  background-color: #730016;
}
.color-b.darker {
  background-color: #640013;
}
.color-b.darkest {
  background-color: #46000d;
}
.color-b.light {
  color: #282a2e;
}
.color-b.light a,
.color-b.light a:hover,
.color-b.light a:active,
.color-b.light a:focus {
  color: #46000d;
}
.color-b.light a.round-icon-button {
  color: #fff;
}
.color-b.button.style-e {
  color: #830019;
}
.color-b,
.color-b a,
.color-b a:hover,
.color-b a:active,
.color-b a:focus,
.color-b a.round-icon-button {
  color: #fff;
}
.color-b.button.style-b img,
.color-b.ajax-loader,
.color-b > thead,
.color-b {
  border-color: #830019;
}
.color-b > thead td,
.color-b > thead th,
.color-b > tbody td {
  border-color: rgba(131, 0, 25, 0.15);
}
.color-b.light {
  background-color: #f3e6e8;
}
.color-b.darkest {
  background-color: #430019;
}
.text-color-b,
.text-color-b.info-box.light a:not(.button),
.button.style-a .text-color-b.icon {
  color: #830019;
}
.text-color-b.dark {
  color: #640013;
}
.text-color-b-light {
  color: #f3e6e8;
}
.fill-color-b {
  fill: #830019;
}
.fill-color-b.dark {
  fill: #730016;
}
.fill-color-b.light {
  fill: #ff7690;
}
.fill-color-b-dark {
  fill: #46000d;
}
.fill-color-b-dark.dark {
  fill: #35000a;
}
.fill-color-b-dark.light {
  fill: #ff395f;
}
/*-- COLOR-C | Grey/blue -------------------------------------------------------------------------*/
.color-c,
.color-c.info-box.style-b.light > *:first-child,
.color-c.button.style-b:hover,
.color-c.button.style-b:focus,
.color-c.button.style-b:active,
.color-c.info-box.light.style-a:before {
  background-color: #526f6a;
}
.color-c.dark,
.color-c.button:hover,
.color-c.button:focus,
.color-c.button:active,
.color-c.round-icon-button:hover,
.color-c.round-icon-button:active,
.color-c.round-icon-button:focus {
  background-color: #4b6661;
}
.color-c.darker {
  background-color: #455d59;
}
.color-c.darkest {
  background-color: #384c48;
}
.color-c.light {
  color: #282a2e;
}
.color-c.light a,
.color-c.light a:hover,
.color-c.light a:active,
.color-c.light a:focus {
  color: #384c48;
}
.color-c.light a.round-icon-button {
  color: #fff;
}
.color-c.button.style-e {
  color: #526f6a;
}
.color-c,
.color-c a,
.color-c a:hover,
.color-c a:active,
.color-c a:focus,
.color-c a.round-icon-button {
  color: #fff;
}
.color-c.button.style-b img,
.color-c.ajax-loader,
.color-c > thead,
.color-c {
  border-color: #526f6a;
}
.color-c > thead td,
.color-c > thead th,
.color-c > tbody td {
  border-color: rgba(82, 111, 106, 0.15);
}
.color-c.light {
  background-color: #d4dfdd;
}
.text-color-c,
.text-color-c.info-box.light a:not(.button),
.button.style-a .text-color-c.icon {
  color: #526f6a;
}
.text-color-c.dark {
  color: #455d59;
}
.fill-color-c {
  fill: #526f6a;
}
.fill-color-c.dark {
  fill: #4b6661;
}
.fill-color-c.light {
  fill: #d4dfdd;
}
.fill-color-c-dark {
  fill: #384c48;
}
.fill-color-c-dark.dark {
  fill: #31423f;
}
.fill-color-c-dark.light {
  fill: #b1c5c2;
}
/*-- COLOR-D | Green -----------------------------------------------------------------------------*/
.color-d,
.color-d.info-box.style-b.light > *:first-child,
.color-d.button.style-b:hover,
.color-d.button.style-b:focus,
.color-d.button.style-b:active,
.color-d.info-box.light.style-a:before {
  background-color: #8d8919;
}
.color-d.dark,
.color-d.button:hover,
.color-d.button:focus,
.color-d.button:active,
.color-d.round-icon-button:hover,
.color-d.round-icon-button:active,
.color-d.round-icon-button:focus {
  background-color: #7f7c17;
}
.color-d.darker {
  background-color: #737014;
}
.color-d.darkest {
  background-color: #595610;
}
.color-d.light {
  color: #282a2e;
}
.color-d.light a,
.color-d.light a:hover,
.color-d.light a:active,
.color-d.light a:focus {
  color: #595610;
}
.color-d.light a.round-icon-button {
  color: #fff;
}
.color-d.button.style-e {
  color: #8d8919;
}
.color-d,
.color-d a,
.color-d a:hover,
.color-d a:active,
.color-d a:focus,
.color-d a.round-icon-button {
  color: #fff;
}
.color-d.button.style-b img,
.color-d.ajax-loader,
.color-d > thead,
.color-d {
  border-color: #8d8919;
}
.color-d > thead td,
.color-d > thead th,
.color-d > tbody td {
  border-color: rgba(141, 137, 25, 0.15);
}
.color-d.light {
  background-color: #e8ddaf;
}
.color-d.darkest {
  background-color: #595610;
}
.text-color-d,
.text-color-d.info-box.light a:not(.button),
.button.style-a .text-color-d.icon {
  color: #8d8919;
}
.text-color-d.dark {
  color: #737014;
}
.text-color-d-light {
  color: #e8ddaf;
}
.fill-color-d {
  fill: #8d8919;
}
.fill-color-d.dark {
  fill: #7f7c17;
}
.fill-color-d.light {
  fill: #f0eda9;
}
.fill-color-d-dark {
  fill: #595610;
}
.fill-color-d-dark.dark {
  fill: #4b490d;
}
.fill-color-d-dark.light {
  fill: #e6e375;
}
/*-- COLOR-E | Orange ----------------------------------------------------------------------------*/
.color-e,
.color-e.info-box.style-b.light > *:first-child,
.color-e.button.style-b:hover,
.color-e.button.style-b:focus,
.color-e.button.style-b:active,
.color-e.info-box.light.style-a:before {
  background-color: #d57420;
}
.color-e.dark,
.color-e.button:hover,
.color-e.button:focus,
.color-e.button:active,
.color-e.round-icon-button:hover,
.color-e.round-icon-button:active,
.color-e.round-icon-button:focus {
  background-color: #c76c1e;
}
.color-e.darker {
  background-color: #ba661c;
}
.color-e.darkest {
  background-color: #a05718;
}
.color-e.light {
  color: #282a2e;
}
.color-e.light a,
.color-e.light a:hover,
.color-e.light a:active,
.color-e.light a:focus {
  color: #a05718;
}
.color-e.light a.round-icon-button {
  color: #fff;
}
.color-e.button.style-e {
  color: #d57420;
}
.color-e,
.color-e a,
.color-e a:hover,
.color-e a:active,
.color-e a:focus,
.color-e a.round-icon-button {
  color: #fff;
}
.color-e.button.style-b img,
.color-e.ajax-loader,
.color-e > thead,
.color-e {
  border-color: #d57420;
}
.color-e > thead td,
.color-e > thead th,
.color-e > tbody td {
  border-color: rgba(213, 116, 32, 0.15);
}
.color-e.light {
  background-color: #f9deb9;
}
.color-e.darkest {
  background-color: #743600;
}
.text-color-e,
.text-color-e.info-box.light a:not(.button),
.button.style-a .text-color-e.icon {
  color: #d57420;
}
.text-color-e.dark {
  color: #ba661c;
}
.text-color-e-light {
  color: #f9deb9;
}
.fill-color-e {
  fill: #d57420;
}
.fill-color-e.dark {
  fill: #c76c1e;
}
.fill-color-e.light {
  fill: #fcf3eb;
}
.fill-color-e-dark {
  fill: #a05718;
}
.fill-color-e-dark.dark {
  fill: #924f16;
}
.fill-color-e-dark.light {
  fill: #f4d3b6;
}
/*-- COLOR-F | Charcoal grey ----------------------------------------------------------------------*/
.color-f,
.color-f.info-box.style-b.light > *:first-child,
.color-f.button.style-b:hover,
.color-f.button.style-b:focus,
.color-f.button.style-b:active,
.color-f.info-box.light.style-a:before {
  background-color: #6a6b6c;
}
.color-f.dark,
.color-f.button:hover,
.color-f.button:focus,
.color-f.button:active,
.color-f.round-icon-button:hover,
.color-f.round-icon-button:active,
.color-f.round-icon-button:focus {
  background-color: #626364;
}
.color-f.darker {
  background-color: #5b5c5d;
}
.color-f.darkest {
  background-color: #4c4c4d;
}
.color-f.light {
  color: #282a2e;
}
.color-f.light a,
.color-f.light a:hover,
.color-f.light a:active,
.color-f.light a:focus {
  color: #4c4c4d;
}
.color-f.light a.round-icon-button {
  color: #fff;
}
.color-f.button.style-e {
  color: #6a6b6c;
}
.color-f,
.color-f a,
.color-f a:hover,
.color-f a:active,
.color-f a:focus,
.color-f a.round-icon-button {
  color: #fff;
}
.color-f.button.style-b img,
.color-f.ajax-loader,
.color-f > thead,
.color-f {
  border-color: #6a6b6c;
}
.color-f > thead td,
.color-f > thead th,
.color-f > tbody td {
  border-color: rgba(106, 107, 108, 0.15);
}
.color-f.light {
  background-color: #e8e8e8;
}
.color-f.darkest {
  background-color: #282a2e;
}
.text-color-f,
.text-color-f.info-box.light a:not(.button),
.button.style-a .text-color-f.icon {
  color: #6a6b6c;
}
.text-color-f.dark {
  color: #5b5c5d;
}
.text-color-f-dark,
.text-color-f-dark.info-box.light a:not(.button),
.button.style-a .text-color-f-dark.icon {
  color: #282a2e;
}
.text-color-f-dark.dark {
  color: #1a1b1e;
}
.text-color-f-light {
  color: #c0c0c0;
}
.fill-color-f {
  fill: #6a6b6c;
}
.fill-color-f.dark {
  fill: #626364;
}
.fill-color-f.light {
  fill: #e4e4e4;
}
.fill-color-f-dark {
  fill: #4c4c4d;
}
.fill-color-f-dark.dark {
  fill: #444445;
}
.fill-color-f-dark.light {
  fill: #c5c6c6;
}
/*-- COLOR-G | Slate grey ------------------------------------------------------------------------*/
.color-g,
.color-g.info-box.style-b.light > *:first-child,
.color-g.button.style-b:hover,
.color-g.button.style-b:focus,
.color-g.button.style-b:active,
.color-g.info-box.light.style-a:before {
  background-color: #969799;
}
.color-g.dark,
.color-g.button:hover,
.color-g.button:focus,
.color-g.button:active,
.color-g.round-icon-button:hover,
.color-g.round-icon-button:active,
.color-g.round-icon-button:focus {
  background-color: #8e8f91;
}
.color-g.darker {
  background-color: #86888a;
}
.color-g.darkest {
  background-color: #77787b;
}
.color-g.light {
  color: #282a2e;
}
.color-g.light a,
.color-g.light a:hover,
.color-g.light a:active,
.color-g.light a:focus {
  color: #77787b;
}
.color-g.light a.round-icon-button {
  color: #fff;
}
.color-g.button.style-e {
  color: #969799;
}
.color-g,
.color-g a,
.color-g a:hover,
.color-g a:active,
.color-g a:focus,
.color-g a.round-icon-button {
  color: #fff;
}
.color-g.button.style-b img,
.color-g.ajax-loader,
.color-g > thead,
.color-g {
  border-color: #969799;
}
.color-g > thead td,
.color-g > thead th,
.color-g > tbody td {
  border-color: rgba(150, 151, 153, 0.15);
}
.color-g.light {
  background-color: #f6f6f6;
}
.color-g.darkest {
  background-color: #424347;
}
.text-color-g,
.text-color-g.info-box.light a:not(.button),
.button.style-a .text-color-g.icon {
  color: #8e8f91;
}
.text-color-g.dark {
  color: #7f8082;
}
.text-color-g-light {
  color: #f6f6f6;
}
.fill-color-g {
  fill: #969799;
}
.fill-color-g.dark {
  fill: #8e8f91;
}
.fill-color-g.light {
  fill: #ffffff;
}
.fill-color-g-dark {
  fill: #77787b;
}
.fill-color-g-dark.dark {
  fill: #6f7072;
}
.fill-color-g-dark.light {
  fill: #f2f2f2;
}
/*-- COLOR-H | White ------------------------------------------------------------------------------*/
.color-h,
.color-h.info-box.style-b.light > *:first-child,
.color-h.button.style-b:hover,
.color-h.button.style-b:focus,
.color-h.button.style-b:active,
.color-h.info-box.light.style-a:before {
  background-color: #fff;
}
.color-h.dark,
.color-h.button:hover,
.color-h.button:focus,
.color-h.button:active,
.color-h.round-icon-button:hover,
.color-h.round-icon-button:active,
.color-h.round-icon-button:focus {
  background-color: #f7f7f7;
}
.color-h.darker {
  background-color: #f0f0f0;
}
.color-h.darkest {
  background-color: #e0e0e0;
}
.color-h.light {
  color: #282a2e;
}
.color-h.light a,
.color-h.light a:hover,
.color-h.light a:active,
.color-h.light a:focus {
  color: #e0e0e0;
}
.color-h.light a.round-icon-button {
  color: #fff;
}
.color-h.button.style-e {
  color: #fff;
}
.color-h,
.color-h a,
.color-h a:hover,
.color-h a:active,
.color-h a:focus,
.color-h a.round-icon-button {
  color: #fff;
}
.color-h.button.style-b img,
.color-h.ajax-loader,
.color-h > thead,
.color-h {
  border-color: #fff;
}
.color-h > thead td,
.color-h > thead th,
.color-h > tbody td {
  border-color: rgba(255, 255, 255, 0.15);
}
.color-h a,
.color-h a:hover,
.color-h a:active,
.color-h a:focus {
  color: #930019;
}
.color-h.light {
  background-color: #fff;
}
.color-h {
  color: #282a2e;
}
a.text-color-h:not(.round-icon-button),
.text-color-h,
a.text-color-h:not(.round-icon-button).info-box.light a:not(.button),
.text-color-h.info-box.light a:not(.button),
.button.style-a a.text-color-h:not(.round-icon-button).icon,
.button.style-a .text-color-h.icon {
  color: #fff;
}
a.text-color-h:not(.round-icon-button).dark,
.text-color-h.dark {
  color: #f0f0f0;
}
.fill-color-h {
  fill: #fff;
}
.fill-color-h.dark {
  fill: #f7f7f7;
}
.fill-color-h.light {
  fill: #ffffff;
}
.fill-color-h-dark {
  fill: #e0e0e0;
}
.fill-color-h-dark.dark {
  fill: #d8d8d8;
}
.fill-color-h-dark.light {
  fill: #ffffff;
}
/*-- COLOR-I | Silver - REMOVE ME EVENTUALLY -----------------------------------------------------------------------------*/
.color-i,
.color-i.info-box.style-b.light > *:first-child,
.color-i.button.style-b:hover,
.color-i.button.style-b:focus,
.color-i.button.style-b:active,
.color-i.info-box.light.style-a:before {
  background-color: #f6f6f6;
}
.color-i.dark,
.color-i.button:hover,
.color-i.button:focus,
.color-i.button:active,
.color-i.round-icon-button:hover,
.color-i.round-icon-button:active,
.color-i.round-icon-button:focus {
  background-color: #eeeeee;
}
.color-i.darker {
  background-color: #e7e7e7;
}
.color-i.darkest {
  background-color: #d7d7d7;
}
.color-i.light {
  color: #282a2e;
}
.color-i.light a,
.color-i.light a:hover,
.color-i.light a:active,
.color-i.light a:focus {
  color: #d7d7d7;
}
.color-i.light a.round-icon-button {
  color: #fff;
}
.color-i.button.style-e {
  color: #f6f6f6;
}
.color-i,
.color-i a,
.color-i a:hover,
.color-i a:active,
.color-i a:focus,
.color-i a.round-icon-button {
  color: #fff;
}
.color-i.button.style-b img,
.color-i.ajax-loader,
.color-i > thead,
.color-i {
  border-color: #f6f6f6;
}
.color-i > thead td,
.color-i > thead th,
.color-i > tbody td {
  border-color: rgba(246, 246, 246, 0.15);
}
.color-i.light {
  background-color: #fff;
}
.color-i a,
.color-i a:hover,
.color-i a:active,
.color-i a:focus,
.color-i.light a,
.color-i.light a:hover,
.color-i.light a:active,
.color-i.light a:focus {
  color: #930019;
}
.color-i {
  color: #282a2e;
}
.text-color-i,
.text-color-i.info-box.light a:not(.button),
.button.style-a .text-color-i.icon {
  color: #f6f6f6;
}
.text-color-i.dark {
  color: #e7e7e7;
}
.fill-color-i {
  fill: #f6f6f6;
}
.fill-color-i.dark {
  fill: #eeeeee;
}
.fill-color-i.light {
  fill: #ffffff;
}
.fill-color-i-dark {
  fill: #d7d7d7;
}
.fill-color-i-dark.dark {
  fill: #cfcfcf;
}
.fill-color-i-dark.light {
  fill: #ffffff;
}
/*-- COLOR-J | light blue/grey REMOVE ME EVENTUALLY---------------------------------------------------------------------*/
.color-j,
.color-j.info-box.style-b.light > *:first-child,
.color-j.button.style-b:hover,
.color-j.button.style-b:focus,
.color-j.button.style-b:active,
.color-j.info-box.light.style-a:before {
  background-color: #c1dbdb;
}
.color-j.dark,
.color-j.button:hover,
.color-j.button:focus,
.color-j.button:active,
.color-j.round-icon-button:hover,
.color-j.round-icon-button:active,
.color-j.round-icon-button:focus {
  background-color: #b7d5d5;
}
.color-j.darker {
  background-color: #aed0d0;
}
.color-j.darkest {
  background-color: #9ac5c5;
}
.color-j.light {
  color: #282a2e;
}
.color-j.light a,
.color-j.light a:hover,
.color-j.light a:active,
.color-j.light a:focus {
  color: #9ac5c5;
}
.color-j.light a.round-icon-button {
  color: #fff;
}
.color-j.button.style-e {
  color: #c1dbdb;
}
.color-j,
.color-j a,
.color-j a:hover,
.color-j a:active,
.color-j a:focus,
.color-j a.round-icon-button {
  color: #fff;
}
.color-j.button.style-b img,
.color-j.ajax-loader,
.color-j > thead,
.color-j {
  border-color: #c1dbdb;
}
.color-j > thead td,
.color-j > thead th,
.color-j > tbody td {
  border-color: rgba(193, 219, 219, 0.15);
}
.color-j.light {
  background-color: #fff;
}
.text-color-j,
.text-color-j.info-box.light a:not(.button),
.button.style-a .text-color-j.icon {
  color: #c1dbdb;
}
.text-color-j.dark {
  color: #aed0d0;
}
.fill-color-j {
  fill: #c1dbdb;
}
.fill-color-j.dark {
  fill: #b7d5d5;
}
.fill-color-j.light {
  fill: #ffffff;
}
.fill-color-j-dark {
  fill: #9ac5c5;
}
.fill-color-j-dark.dark {
  fill: #90bfbf;
}
.fill-color-j-dark.light {
  fill: #ffffff;
}
/*-- COLOR-K | Bright maroon -----------------------------------------------------------------------*/
.color-k,
.color-k.info-box.style-b.light > *:first-child,
.color-k.button.style-b:hover,
.color-k.button.style-b:focus,
.color-k.button.style-b:active,
.color-k.info-box.light.style-a:before {
  background-color: #930019;
}
.color-k.dark,
.color-k.button:hover,
.color-k.button:focus,
.color-k.button:active,
.color-k.round-icon-button:hover,
.color-k.round-icon-button:active,
.color-k.round-icon-button:focus {
  background-color: #830016;
}
.color-k.darker {
  background-color: #740014;
}
.color-k.darkest {
  background-color: #56000f;
}
.color-k.light {
  color: #282a2e;
}
.color-k.light a,
.color-k.light a:hover,
.color-k.light a:active,
.color-k.light a:focus {
  color: #56000f;
}
.color-k.light a.round-icon-button {
  color: #fff;
}
.color-k.button.style-e {
  color: #930019;
}
.color-k,
.color-k a,
.color-k a:hover,
.color-k a:active,
.color-k a:focus,
.color-k a.round-icon-button {
  color: #fff;
}
.color-k.button.style-b img,
.color-k.ajax-loader,
.color-k > thead,
.color-k {
  border-color: #930019;
}
.color-k > thead td,
.color-k > thead th,
.color-k > tbody td {
  border-color: rgba(147, 0, 25, 0.15);
}
.color-k.light {
  background-color: #f3e6e8;
}
.text-color-k,
.text-color-k.info-box.light a:not(.button),
.button.style-a .text-color-k.icon {
  color: #930019;
}
.text-color-k.dark {
  color: #740014;
}
.fill-color-k {
  fill: #930019;
}
.fill-color-k.dark {
  fill: #830016;
}
.fill-color-k.light {
  fill: #ff869b;
}
.fill-color-k-dark {
  fill: #56000f;
}
.fill-color-k-dark.dark {
  fill: #45000c;
}
.fill-color-k-dark.light {
  fill: #ff4968;
}
/*-- COLOR-L | Dandelion -----------------------------------------------------------------------*/
.color-l,
.color-l.info-box.style-b.light > *:first-child,
.color-l.button.style-b:hover,
.color-l.button.style-b:focus,
.color-l.button.style-b:active,
.color-l.info-box.light.style-a:before {
  background-color: #f4b121;
}
.color-l.dark,
.color-l.button:hover,
.color-l.button:focus,
.color-l.button:active,
.color-l.round-icon-button:hover,
.color-l.round-icon-button:active,
.color-l.round-icon-button:focus {
  background-color: #f3ac11;
}
.color-l.darker {
  background-color: #eba40c;
}
.color-l.darkest {
  background-color: #ce900a;
}
.color-l.light {
  color: #282a2e;
}
.color-l.light a,
.color-l.light a:hover,
.color-l.light a:active,
.color-l.light a:focus {
  color: #ce900a;
}
.color-l.light a.round-icon-button {
  color: #fff;
}
.color-l.button.style-e {
  color: #f4b121;
}
.color-l,
.color-l a,
.color-l a:hover,
.color-l a:active,
.color-l a:focus,
.color-l a.round-icon-button {
  color: #fff;
}
.color-l.button.style-b img,
.color-l.ajax-loader,
.color-l > thead,
.color-l {
  border-color: #f4b121;
}
.color-l > thead td,
.color-l > thead th,
.color-l > tbody td {
  border-color: rgba(244, 177, 33, 0.15);
}
.color-l.light {
  background-color: #fff0c1;
  color: unset;
}
.color-l.darkest {
  background-color: #9a7015;
}
.text-color-l,
.text-color-l.info-box.light a:not(.button),
.button.style-a .text-color-l.icon {
  color: #f4b121;
}
.text-color-l.dark {
  color: #eba40c;
}
.text-color-l-light {
  color: #fff0c1;
}
.fill-color-l {
  fill: #f4b121;
}
.fill-color-l.dark {
  fill: #f3ac11;
}
.fill-color-l.light {
  fill: #ffffff;
}
.fill-color-l-dark {
  fill: #ce900a;
}
.fill-color-l-dark.dark {
  fill: #be8509;
}
.fill-color-l-dark.light {
  fill: #fdeece;
}
/*-- TRANSPARENT -----------------------------------------------------------------------*/
.fill-color-transparent {
  fill: none;
}

			
			

			.text-100{
			  font-size:100px;
			}
			.text-90{
			  font-size:90px;
			}
			.text-80{
			  font-size:80px;
			}
			.text-70{
			  font-size:70px;
			}
			.text-60{
			  font-size:60px;
			}
			.text-50{
			  font-size:50px;
			}
			.text-40{
			  font-size:40px;
			}
			.text-30{
			  font-size:30px;
			}
		]]></style>
        <pattern id="style14" patternUnits="userSpaceOnUse" width="1920" height="1080" class="bulletin-image">
							<image xlink:href="https://www.uwlax.edu/globalassets/admin/bulletins/icon-globe-light.png" x="0" y="0" width="1920" height="1080" preserveAspectRatio="xMinYMid slice" />
						</pattern>
						<linearGradient id="style14gradient" x1="0%" y1="0%" x2="0%" y2="80%">
							<stop offset="0%" style="stop-color:#000;stop-opacity:.6" />
							<stop offset="100%" style="stop-color:#000;stop-opacity:0" />
						</linearGradient>
    </defs>
					
					
			
					<g class="sign-contents" class="fill-color-b">
						<rect x="0" fill="url(#style14)" width="1920" height="1080" class="primary-image" />
						<rect x="0" class="fill-color-e color-1" width="1920" height="1080" fill-opacity=".8" />
						<rect x="0" fill="url(#style14gradient)" width="1920" height="1080" />
						<rect x="640" class="fill-color-transparent" width="1180" height="1080" />
						<text x="960" y="400" font-size="120" class="fill-color-h font-family-a bulletin-title color-3" text-anchor="middle">							This is simply a forty character heading
						</text>
						<text x="960" y="500" class="text-60 fill-color-h font-family-c bulletin-subtitle color-4" text-anchor="middle" fill-opacity=".8">							This is simply a forty character heading
						</text>
						<text y="810" class="bulletin-details fill-color-h font-family-c text-50 color-4" fill-opacity=".8">
							<tspan x="100" dy="70">
								Monday, Nov. 16
							</tspan>
							<tspan x="100" dy="70">
								6-7 p.m.
							</tspan>
							<tspan x="100" dy="70">
								Cameron Hall of Nations Centennial Hall
							</tspan>
						</text>
					</g>
				</svg>


/*Downloaded from https://www.codeseek.co/jspeer/svg-to-png-yEyvdQ */
    body{
	background:#282a2e;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/*Downloaded from https://www.codeseek.co/jspeer/svg-to-png-yEyvdQ */
    $('.style-a .wrap').each(function() {
  d3plus.textwrap().container(d3.select(this)).draw();
  $(this).attr("y",460-($(this).children("tspan").length*parseInt($(this).find("tspan").attr("dy"))/2));
});
$('.style-a .bulletin-date').each(function() {
	var bulletinTitle= $(this).parent().find(".bulletin-title");
  $(this).attr("y",parseInt(bulletinTitle[0].getBBox().height)+parseInt(bulletinTitle.attr("y"))+50+"px"); 
});
//NOTE!!!
//IF FONTS DON'T LOAD IT's BECAUSE THEY NEED DOUBLE QUOTES AROUND THEIR NAME!!

$("#svg-google").load("https://fonts.googleapis.com/css?family=Roboto+Condensed:700,700i,400,400i|Oswald|Satisfy|Noto+Serif:400,700,400italic,700italic", function(){
	$('#svg-fonts').html('.font-family-a, .font-family-b, .font-family-c, .font-family-d { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* [ Font family selections ] */ .font-family-a { font-family: "Oswald"; }.font-family-b, address { font-family: "Satisfy", cursive; font-style: normal; } body, input, select, textarea, button, .font-family-c, .tooltipster-default .tooltipster-content, .img-caption { font-family: "Roboto Condensed"; } .button.font-family-c { text-transform: uppercase; } .font-family-d, .prominent-text { font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif; } h2.mini-header, h2.mini-header.block-heading, .mini-header { font-size: 0.95rem; letter-spacing: 3px; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; text-transform: uppercase; line-height: 1; letter-spacing: .1rem; } .prominent-text { font-size: 26px; line-height: 50px; text-align: center; } a, a:visited { color: #930019; text-decoration: underline; } a:active, a:visited:active, a:focus, a:visited:focus, a:hover, a:visited:hover { text-decoration: none; color: #830019; }');
	$('#svg-sign').addClass("loaded");
	
	var canvasCreation = setInterval(
		function(){ 
			var signName = 'svg-sign';
			if($('#'+signName).hasClass("loaded")){
				
				$('#'+signName).after('<canvas id="'+signName+'1080" width="1920" height="1080"></canvas><canvas id="'+signName+'2160" width="3840" height="2160"></canvas>');
				console.log($('#'+signName).html());
				var svg_2 = $('<div>').append($('#'+signName).clone()).html();
				canvg(document.getElementById(signName+'1080'), svg_2,{
					offsetX: 0,
					offsetY: 0,
					ignoreClear: false,
					ignoreMouse:true,
					ignoreAnimation:true,
					ignoreDimensions: true
				});
				canvg(document.getElementById(signName+'2160'), svg_2,{
					offsetX: 0,
					offsetY: 0,
					ignoreClear: false,
					ignoreMouse:true,
					ignoreAnimation:true,
					ignoreDimensions: true
				});
				clearInterval(canvasCreation);
				//$('#svg-sign').hide();
			}
			//alert('test');
		}, 300
		
	);
	
	
});
//$("#svg-colors").load("//www.uwlax.edu/styles/uwl-colors.css");
//$("#svg-fonts").load("//www.uwlax.edu/styles/uwl-fonts.css");

Comments

More from jspeer

SVG to PNG

In this example below you will see how to do a SVG to PNG with some HTML / CSS and Javascript

Comments

More from jspeer

SVG to PNG

SVG to PNG - for kyle to test

SVG Word Wrap testing

UWL event image builder

You Might Also Like

AngularJS Form Boilerplate

A Pen by Ryan P. C. McQuen

Flubby navigation 2

Reverse List

Simulate SVG paths are drawn using CSS animation

A Pen by Irakli Tsaishvili

30 Days of Vue - Day 5 -Watching for changes

Color wave