Hi Harbs, I think I tried that but not worked for inline SVG in CSS SVG inlined is a very fragile feature, and is not supported well cross browser.
Maybe I'll give it a try again since I'm getting a blocking issue in IE11, I think is this [1] and can't get it working. IE11 does not process inline styles in SVG. Maybe getting to load the SVG can make it work, but I think I can find again the problem that made me go the actual route. Let's see what happen. IE11 is a real pain to make ir work... :_( [1] https://github.com/kisenka/svg-sprite-loader/issues/163 2018-06-04 12:33 GMT+02:00 Harbs <[email protected]>: > Looking at the Jewel themes, I thought of a possible suggestion for > specifying SVG color: > > Instead of inlining fill='#{encodecolor($primary-color)}’, I’m wondering > if it might be better to give the elements a class. Something like this: > > <polygon class=“primary-fill” points='3 13 9 18 19 7 16 5 9 13 6 > 10'></polygon> > > and elsewhere: > .primary-fill{ > fill: $primary-color; > } > > The same for secondary, strokes, etc. > > It might even make sense to specify classes for primary and secondary > colors and background colors, etc. > > Doing so, might make it easier to swap color schemes. It’ll probably also > result in simpler CSS. > > Just a thought, :-) > Harbs > > > On Jun 4, 2018, at 1:19 PM, [email protected] wrote: > > > > This is an automated email from the ASF dual-hosted git repository. > > > > carlosrovira pushed a commit to branch develop > > in repository https://gitbox.apache.org/repos/asf/royale-asjs.git > > > > > > The following commit(s) were added to refs/heads/develop by this push: > > new 9525660 remove invalid ";utf8" in all inlined svg images > > new db4b818 Merge branch 'develop' of https://github.com/apache/ > royale-asjs into develop > > 9525660 is described below > > > > commit 95256606096972af65d00a578741afd697a39c1e > > Author: Carlos Rovira <[email protected]> > > AuthorDate: Mon Jun 4 12:18:50 2018 +0200 > > > > remove invalid ";utf8" in all inlined svg images > > --- > > frameworks/themes/JewelTheme/src/main/resources/defaults.css | 12 > ++++++------ > > .../src/main/sass/components-primary/_checkbox.sass | 10 > +++++----- > > .../src/main/sass/components-primary/_radiobutton.sass | 10 > +++++----- > > .../JewelTheme/src/main/sass/components-primary/_slider.sass | 2 +- > > 4 files changed, 17 insertions(+), 17 deletions(-) > > > > diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css > b/frameworks/themes/JewelTheme/src/main/resources/defaults.css > > index 0663ee5..253b8c0 100644 > > --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css > > +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css > > @@ -236,14 +236,14 @@ j|Card { > > border-radius: 3px; > > } > > .jewel.checkbox input:checked, .jewel.checkbox input:checked:active { > > - background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 > 10'></polygon></g></g></svg>"), #f8f8f8; > > + background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 > 10'></polygon></g></g></svg>"), #f8f8f8; > > background-repeat: no-repeat; > > background-size: 90%; > > background-position: center; > > background-attachment: fixed; > > } > > .jewel.checkbox input:checked:checked:focus, .jewel.checkbox > input:checked:checked:active:focus, .jewel.checkbox > input:checked:active:checked:focus, .jewel.checkbox > input:checked:active:checked:active:focus { > > - background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 > 10'></polygon></g></g></svg>"), #b3dffa; > > + background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 > 10'></polygon></g></g></svg>"), #b3dffa; > > background-repeat: no-repeat; > > background-size: 90%; > > background-position: center; > > @@ -263,7 +263,7 @@ j|Card { > > color: silver; > > } > > .jewel.checkbox input[disabled]:checked { > > - background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 > 10'></polygon></g></g></svg>"), #f3f3f3; > > + background: url("data:image/svg+xml,<svg viewBox='0 0 16 13' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 > 10'></polygon></g></g></svg>"), #f3f3f3; > > background-size: 90%; > > background-position: center; > > background-repeat: no-repeat; > > @@ -371,14 +371,14 @@ j|Card { > > border-radius: 50%; > > } > > .jewel.radiobutton input:checked, .jewel.radiobutton > input:checked:active { > > - background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='%233CADF1' cx='11' cy='11' > r='6'></circle></g></g></svg>"), #f8f8f8; > > + background: url("data:image/svg+xml,<svg viewBox='0 0 12 12' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='%233CADF1' cx='11' cy='11' > r='6'></circle></g></g></svg>"), #f8f8f8; > > background-repeat: no-repeat; > > background-size: 60%; > > background-position: center; > > background-attachment: fixed; > > } > > .jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton > input:checked:checked:active:focus, .jewel.radiobutton > input:checked:active:checked:focus, .jewel.radiobutton > input:checked:active:checked:active:focus { > > - background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='%233CADF1' cx='11' cy='11' > r='6'></circle></g></g></svg>"), #b3dffa; > > + background: url("data:image/svg+xml,<svg viewBox='0 0 12 12' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='%233CADF1' cx='11' cy='11' > r='6'></circle></g></g></svg>"), #b3dffa; > > background-repeat: no-repeat; > > background-size: 60%; > > background-position: center; > > @@ -398,7 +398,7 @@ j|Card { > > color: silver; > > } > > .jewel.radiobutton input[disabled]:checked { > > - background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='%23cccccc' cx='11' cy='11' > r='6'></circle></g></g></svg>"), #f3f3f3; > > + background: url("data:image/svg+xml,<svg viewBox='0 0 12 12' > version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='%23cccccc' cx='11' cy='11' > r='6'></circle></g></g></svg>"), #f3f3f3; > > background-size: 60%; > > background-position: center; > > background-repeat: no-repeat; > > diff --git a/frameworks/themes/JewelTheme/src/main/sass/ > components-primary/_checkbox.sass b/frameworks/themes/ > JewelTheme/src/main/sass/components-primary/_checkbox.sass > > index d7e1dbc..6c3aa79 100644 > > --- a/frameworks/themes/JewelTheme/src/main/sass/ > components-primary/_checkbox.sass > > +++ b/frameworks/themes/JewelTheme/src/main/sass/ > components-primary/_checkbox.sass > > @@ -60,9 +60,9 @@ $checkbox-label-font-size: 16px > > > > &:checked, &:checked:active > > @if $flat > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 > 7 16 5 9 13 6 10'></polygon></g></g></svg>"), $default-color > > + background: url("data:image/svg+xml,<svg viewBox='0 0 > 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 > 7 16 5 9 13 6 10'></polygon></g></g></svg>"), $default-color > > @else > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 > 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($default-color, > 12%)//linear-gradient(lighten($default-color, 15%), > lighten($default-color, 10%)) > > + background: url("data:image/svg+xml,<svg viewBox='0 0 > 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 > 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($default-color, > 12%)//linear-gradient(lighten($default-color, 15%), > lighten($default-color, 10%)) > > background-repeat: no-repeat > > background-size: 90% > > background-position: center > > @@ -70,9 +70,9 @@ $checkbox-label-font-size: 16px > > > > &:checked:focus, &:checked:active:focus > > @if $flat > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 > 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($primary-color, 25%) > > + background: url("data:image/svg+xml,<svg viewBox='0 > 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 > 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($primary-color, 25%) > > @else > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 > 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($primary-color, > 25%)//linear-gradient(lighten($default-color, 25%), > lighten($default-color, 20%)) > > + background: url("data:image/svg+xml,<svg viewBox='0 > 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 > 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($primary-color, > 25%)//linear-gradient(lighten($default-color, 25%), > lighten($default-color, 20%)) > > background-repeat: no-repeat > > background-size: 90% > > background-position: center > > @@ -99,7 +99,7 @@ $checkbox-label-font-size: 16px > > color: $disabled-font-color > > > > &:checked > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor(darken($disabled-color, 15%))}' > points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), > $disabled-color > > + background: url("data:image/svg+xml,<svg viewBox='0 0 > 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-763, -290)'><g transform='translate(760, > 285)'><polygon fill='#{encodecolor(darken($disabled-color, 15%))}' > points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), > $disabled-color > > background-size: 90% > > background-position: center > > background-repeat: no-repeat > > diff --git a/frameworks/themes/JewelTheme/src/main/sass/ > components-primary/_radiobutton.sass b/frameworks/themes/ > JewelTheme/src/main/sass/components-primary/_radiobutton.sass > > index 945c4b3..31d0458 100644 > > --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_ > radiobutton.sass > > +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_ > radiobutton.sass > > @@ -60,9 +60,9 @@ $radiobutton-label-font-size: 16px > > > > &:checked, &:checked:active > > @if $flat > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' > r='6'></circle></g></g></svg>"), $default-color > > + background: url("data:image/svg+xml,<svg viewBox='0 0 > 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' > r='6'></circle></g></g></svg>"), $default-color > > @else > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' > r='6'></circle></g></g></svg>"), lighten($default-color, > 12%)//linear-gradient(lighten($default-color, 15%), > lighten($default-color, 10%)) > > + background: url("data:image/svg+xml,<svg viewBox='0 0 > 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' > r='6'></circle></g></g></svg>"), lighten($default-color, > 12%)//linear-gradient(lighten($default-color, 15%), > lighten($default-color, 10%)) > > background-repeat: no-repeat > > background-size: 60% > > background-position: center > > @@ -70,9 +70,9 @@ $radiobutton-label-font-size: 16px > > > > &:checked:focus, &:checked:active:focus > > @if $flat > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' > r='6'></circle></g></g></svg>"), lighten($primary-color, 25%) > > + background: url("data:image/svg+xml,<svg viewBox='0 > 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' > r='6'></circle></g></g></svg>"), lighten($primary-color, 25%) > > @else > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' > r='6'></circle></g></g></svg>"), lighten($primary-color, 25%) > //linear-gradient(lighten($default-color, 25%), lighten($default-color, > 20%)) > > + background: url("data:image/svg+xml,<svg viewBox='0 > 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' > r='6'></circle></g></g></svg>"), lighten($primary-color, 25%) > //linear-gradient(lighten($default-color, 25%), lighten($default-color, > 20%)) > > background-repeat: no-repeat > > background-size: 60% > > background-position: center > > @@ -99,7 +99,7 @@ $radiobutton-label-font-size: 16px > > color: $disabled-font-color > > > > &:checked > > - background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor(darken($disabled-color, 15%))}' cx='11' > cy='11' r='6'></circle></g></g></svg>"), $disabled-color > > + background: url("data:image/svg+xml,<svg viewBox='0 0 > 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g > transform='translate(-616, -350)'><g transform='translate(611, > 345)'><circle fill='#{encodecolor(darken($disabled-color, 15%))}' cx='11' > cy='11' r='6'></circle></g></g></svg>"), $disabled-color > > background-size: 60% > > background-position: center > > background-repeat: no-repeat > > diff --git a/frameworks/themes/JewelTheme/src/main/sass/ > components-primary/_slider.sass b/frameworks/themes/ > JewelTheme/src/main/sass/components-primary/_slider.sass > > index f0b545b..d2a25d3 100644 > > --- a/frameworks/themes/JewelTheme/src/main/sass/ > components-primary/_slider.sass > > +++ b/frameworks/themes/JewelTheme/src/main/sass/ > components-primary/_slider.sass > > @@ -75,7 +75,7 @@ $slider-container-height: #{$slider-thumb-size + > round($slider-thumb-size/2)} > > border: 0 > > @else > > background: linear-gradient(lighten($primary-color, > 3%), darken($primary-color, 3%)) > > - // background: url("data:image/svg+xml;utf8,<svg > viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' > xmlns:xlink='http://www.w3.org/1999/xlink'><defs><radialGradient > cx='6.43382353%' cy='50%' fx='6.43382353%' fy='50%' r='85.5152803%' > id='radialGradient-1'><stop stop-color='#54B7F4' offset='0%'></stop><stop > stop-color='#26A3EF' offset='100%'></stop></radialGradient><circle > id='path-2' cx='9' cy='9' r='9'></circle></defs><g stroke='none' > stroke-width='1' fi [...] > > + // background: url("data:image/svg+xml,<svg viewBox='0 > 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink=' > http://www.w3.org/1999/xlink'><defs><radialGradient cx='6.43382353%' > cy='50%' fx='6.43382353%' fy='50%' r='85.5152803%' > id='radialGradient-1'><stop stop-color='#54B7F4' offset='0%'></stop><stop > stop-color='#26A3EF' offset='100%'></stop></radialGradient><circle > id='path-2' cx='9' cy='9' r='9'></circle></defs><g stroke='none' > stroke-width='1' fill='n [...] > > // background-repeat: no-repeat > > // background-size: 100% > > // background-position: center > > > > -- > > To stop receiving notification emails like this one, please contact > > [email protected]. > > -- Carlos Rovira http://about.me/carlosrovira
