How to deal with cc svg file ?

[agileago]

Hi @jkphl . i use the photoshop cc2015 to export some svg file from .psd file. the svg source code like this:

**the new.svg file**

<svg height="43" preserveAspectRatio="xMidYMid" viewBox="0 0 40 43" width="40" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      .cls-1 {
        fill: #33b6fa;
        fill-rule: evenodd;
      }
      .cls-2,
      .cls-3 {
        font-size: 22px;
      }
      .cls-3 {
        fill: #fff;
        font-family: &quot;
        STHeitiSC-Light&quot;
      }
    </style>
  </defs><path class="cls-1" d="M0 0h40v43l-20-5.292-20 5.292v-43z"/>
  <text class="cls-2" x="9" y="27">
    <tspan class="cls-3">新</tspan>
  </text>
</svg>

**the coin.svg file**

<svg height="36" preserveAspectRatio="xMidYMid" viewBox="0 0 36 36" width="36" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      .cls-1 {
        fill: #fff45c;
        stroke: #fc0;
        stroke-width: 2px;
      }
      .cls-2,
      .cls-3 {
        font-size: 20px;
      }
      .cls-3 {
        fill: #fc0;
        font-family: &quot;
        Microsoft YaHei&quot;
      }
    </style>
  </defs><circle class="cls-1" cx="18" cy="18" r="17"/>
  <text class="cls-2" x="8" y="24">
    <tspan class="cls-3">爽</tspan>
  </text>
</svg

now i want to use this gulp-plugin to bundle them to one svg-symbol file that i can use it on page by

<svg>
 <use xlink:href="svg-symbol.svg#coin"></use>
</svg>

my gulpfile config is

gulp.task('sprites', () =>{
  return gulp.src('img/icon/*.svg')
             .pipe($.svgSprite({
               mode: {
                 symbol: true
               }
             }))
             .pipe(gulp.dest('img'))
} )

and it generator the symbol file

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <symbol id="coin" preserveAspectRatio="xMidYMid" viewBox="0 0 36 36">
    <defs>
      <style>
        .acls-1 {
          fill: #fff45c;
          stroke: #fc0;
          stroke-width: 2px;
        }
        .cls-2,
        .cls-3 {
          font-size: 20px;
        }
        .acls-3 {
          fill: #fc0;
          font-family: "Microsoft YaHei";
        }
      </style>
    </defs><circle class="acls-1" cx="18" cy="18" r="17"/>
    <text class="acls-2" x="8" y="24">
      <tspan class="acls-3">爽</tspan>
    </text>
  </symbol>
  <symbol id="new" preserveAspectRatio="xMidYMid" viewBox="0 0 40 43">
    <defs>
      <style>
        .bcls-1 {
          fill: #33b6fa;
          fill-rule: evenodd;
        }
        .cls-2,
        .cls-3 {
          font-size: 22px;
        }
        .bcls-3 {
          fill: #fff;
          font-family: "STHeitiSC-Light";
        }
      </style>
    </defs><path class="bcls-1" d="M0 0h40v43l-20-5.292L0 43V0z"/>
    <text class="bcls-2" x="9" y="27">
      <tspan class="bcls-3">新</tspan>
    </text>
  </symbol>
</svg>

but i found i can't use it. can you tell me is there some solution to solve this case ? i will be very appreciate

[jkphl]

Could you please specify what you mean with "I found i can't use it"? What happens? The sprite looks quite fine to me (although I spot an interesting error with the cls-2 CSS rule — I will investigate this further, but it shouldn't be a show-stopper for you).

Of course it's important that you <use> a valid fragment identifier (#coin as in the example you gave wouldn't be valid, whereas #new and #suggest were). Also please note that Internet Explorer is known not to support fragment identifiers with SVGs, so you would have to use a workaround. Please read the introduction to <defs> and <symbol> sprites for further details.

[agileago]

html

chrome display

[jkphl]

• At least what I can see from the example sprite you gave, #coin is not a valid fragment identifier, as there's no shape in the sprite with that ID value. Please provide the content of the sprite you're really using, or correct the fragment identifier.
• What is the result you expect? I can't see any error without knowing your expectations and / or the correct sprite?

[agileago]

oh sorry. i rewrite it . excuse me

[agileago]

i update the first comment. i want to expect it display like this

and i found when the <style><style> in svg.symbol file . i use <use></use> tag to display it. it will not work.

[agileago]

maybe the svg file content of cc2015 export is not right . i solve it through converting the class style to inline style manual for now . like this

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <symbol id="coin" preserveAspectRatio="xMidYMid" viewBox="0 0 36 36">
<circle style="fill: #fff45c;stroke: #fc0;stroke-width: 2px;" cx="18" cy="18" r="17"/>
    <text style="font-size: 20px;" x="8" y="24">
      <tspan style="font-size:20px;fill:#fc0;font-family:'MicrosoftYaHei';">爽</tspan>
    </text>
  </symbol>
  <symbol id="new" preserveAspectRatio="xMidYMid" viewBox="0 0 40 43">
    <defs>
      <style>
        .bcls-1 {
          fill: #33b6fa;
          fill-rule: evenodd;
        }
        .cls-2,
        .cls-3 {
          font-size: 22px;
        }
        .bcls-3 {
          fill: #fff;
          font-family: "STHeitiSC-Light";
        }
      </style>
    </defs><path class="bcls-1" d="M0 0h40v43l-20-5.292L0 43V0z"/>
    <text class="bcls-2" x="9" y="27">
      <tspan class="bcls-3">新</tspan>
    </text>
  </symbol>
</svg>

now it display normal.

[jkphl]

Thank you — I could reproduce your problem now.

Well, the bad news is: What you want to achieve isn't supported by browsers at the moment (and now I remember I encountered this problem earlier already). When using an external <symbol> sprite the styles embedded into <style> elements inside the sprite won't be used. This seems to be consistent across browsers. There are two options you have:

1. Don't use CSS styles but rather presentation attributes when exporting your SVGs. Instead of embedding CSS styles your elements will get attributes like <circle fill="#fff45c" stroke="#fc0" stroke-width="2px"> and so on. This will work.
2. Embed your sprite inline into your HTML document and reference it with <use xlink:href="#coin"></use> instead having it as an external file. Then your CSS rules will work.

In general, please refer to Sara Soueidan's awesome article for further ideas on how to style <use>d SVGs.

[jkphl]

Our comments seem to have overlapped, but yes, what you describe is one of the possible solutions.

I'll close this issue for now as this is nothing svg-sprite could solve, but please feel free to let me know if you encounter other problems. I'll open another issue regarding the CSS class namespacing problem I spotted in your example files though.

Cheers, Joschi

[agileago]

Thanks for your time. I just want to use the cc2015 exported svg file with boundle on pages . but its content contains <style></style> to control the style not inline style. for me. it is my first to use svg icons in project. i think maybe it is a good idea to develop a tool to solve this problem. it is a normal requirement. BTW thanks again.

[jkphl]

As I said: The "problem" are browsers not supporting the combination of an externally referenced SVG file and embedded CSS <style>s. There will be no tool "solving" this. Wait for the browsers to support it or use another combination of techniques (as outlined above: inline embedding the SVG file or using presentation attributes when exporting from Illustrator — both are viable "solutions"). Cheers.

[parkersweb]

Just a note for other people looking at this in future - there's a way of avoiding this problem at the export step in Illustrator.

At the "SVG options" window (where you choose the SVG export profile) click the "More Options" button; in the "advanced properties" section set CSS properties to "presentation attributes" (rather than style attributes).

Should then be good to generate presentational styles for use in the sprite...

[jkphl]

Thanks for the hint, @parkersweb!