Fix SVG style conflicts (#1645)

A huge thank-you to @ivanvotti for this contribution.
travis-ci · Jun 1, 2018 · 2fbdc63 · 2fbdc63
1 parent 39ff72c
commit 2fbdc63
Show file tree

Hide file tree

Showing 5 changed files with 645 additions and 516 deletions.
diff --git a/app/templates/getting-started.hbs b/app/templates/getting-started.hbs
@@ -12,7 +12,7 @@
 
         <ol class="getting-started-steps">
           <li>
-            {{svg-jar 'hooks-step-1-01' class="getting-started-image"}}
+            <img src='/images/svg/hooks-step-1-01.svg' class="getting-started-image">
             <div>
               <h2 class="h3--green">Activate your GitHub repositories</h2>
               <p>Once you're signed in, go to your profile page where you'll see all the organizations you're a member of.</p>
@@ -22,7 +22,7 @@
             </div>
           </li>
           <li>
-            {{svg-jar 'hooks-step-2-01' class="getting-started-image"}}
+            <img src='/images/svg/hooks-step-2-01.svg' class="getting-started-image">
             <div>
               <h2 class="h3--green">Add a .travis.yml file to your repository</h2>
               <p>In order for Travis CI to build your project, you'll need to add a .travis.yml configuration file to the root directory
@@ -32,7 +32,7 @@
             </div>
           </li>
           <li>
-            {{svg-jar 'hooks-step-3-01' class="getting-started-image"}}
+            <img src='/images/svg/hooks-step-3-01.svg' class="getting-started-image">
             <div>
               <h2 class="h3--green">Trigger your first build</h2>
               <p>You've configured the GitHub App integration, and added a .travis.yml file to your repository, all you need to do now is

diff --git a/app/templates/logo.hbs b/app/templates/logo.hbs
@@ -12,13 +12,13 @@
       <div class="logo-logos">
         <figure>
           <div class="logos--light">
-            <img src="/images/pro-landing/TravisCI-logolockup-spacingexample.svg" alt="Travis CI logo on light background">
+            {{svg-jar 'TravisCI-logolockup-spacingexample' alt='Travis CI logo on light background'}}
           </div>
           <figcaption class="text-small">Dark logo on light background <a href="images/logos/TravisCI-Full-Color.eps" title="" download="TravisCI-Full-Color.eps">.eps</a> or <a href="images/logos/TravisCI-Full-Color.png" title="" download="TravisCI-Full-Color.png">.png</a></figcaption>
         </figure>
         <figure>
           <div class="logos--dark">
-            <img src="/images/pro-landing/TravisCI-logolockup-spacingexample-darkbg.svg" alt="Travis CI logo on dark background">
+            {{svg-jar 'TravisCI-logolockup-spacingexample-darkbg' alt='Travis CI logo on dark background'}}
           </div>
           <figcaption class="text-small">Light logo on dark background <a href="images/logos/TravisCI-Full-Color-light.eps" title="" download="TravisCI-Full-Color-light.eps">.eps</a> or <a href="images/logos/TravisCI-Full-Color-light.png" title="" download="TravisCI-Full-Color-light.png">.png</a></figcaption>
         </figure>
@@ -74,93 +74,93 @@
       <ul class="list--mascot">
         <li>
           <figure>
-            <img src="/images/logos/TravisCI-Mascot-1.svg" alt="Mascot">
+            {{svg-jar 'TravisCI-Mascot-1' alt='Mascot'}}
             <figcaption class="text-small"><a href="images/logos/TravisCI-Mascot-1.eps" download="TravisCI-Mascot-1.eps" title="">.eps</a> <a href="images/logos/TravisCI-Mascot-1.png" download="TravisCI-Mascot-1.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="/images/logos/TravisCI-Mascot-2.svg" alt="Mascot">
+            {{svg-jar 'TravisCI-Mascot-2' alt='Mascot'}}
             <figcaption class="text-small"><a href="images/logos/TravisCI-Mascot-2.eps" download="TravisCI-Mascot-2.eps" title="">.eps</a> <a href="images/logos/TravisCI-Mascot-2.png" download="TravisCI-Mascot-2.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="/images/logos/TravisCI-Mascot-3.svg" alt="Mascot">
+            {{svg-jar 'TravisCI-Mascot-3' alt='Mascot'}}
             <figcaption class="text-small"><a href="images/logos/TravisCI-Mascot-3.eps" download="TravisCI-Mascot-3.eps" title="">.eps</a> <a href="images/logos/TravisCI-Mascot-3.png" download="TravisCI-Mascot-3.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="/images/logos/TravisCI-Mascot-4.svg" alt="Mascot">
+            {{svg-jar 'TravisCI-Mascot-4' alt='Mascot'}}
             <figcaption class="text-small"><a href="images/logos/TravisCI-Mascot-4.eps" download="TravisCI-Mascot-4.eps" title="">.eps</a> <a href="images/logos/TravisCI-Mascot-4.png" download="TravisCI-Mascot-4.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="/images/logos/TravisCI-Mascot-grey.svg" alt="Mascot">
+            {{svg-jar 'TravisCI-Mascot-grey' alt='Mascot'}}
             <figcaption class="text-small"><a href="images/logos/TravisCI-Mascot-grey.eps" download="TravisCI-Mascot-grey.eps" title="">.eps</a> <a href="images/logos/TravisCI-Mascot-grey.png" download="TravisCI-Mascot-grey.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="/images/logos/TravisCI-Mascot-blue.svg" alt="Mascot">
+            {{svg-jar 'TravisCI-Mascot-blue' alt='Mascot'}}
             <figcaption class="text-small"><a href="images/logos/TravisCI-Mascot-blue.eps" download="TravisCI-Mascot-blue.eps" title="">.eps</a> <a href="images/logos/TravisCI-Mascot-blue.png" download="TravisCI-Mascot-blue.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="/images/logos/TravisCI-Mascot-red.svg" alt="Mascot">
+            {{svg-jar 'TravisCI-Mascot-red' alt='Mascot'}}
             <figcaption class="text-small"><a href="images/logos/TravisCI-Mascot-red.eps" download="TravisCI-Mascot-red.eps" title="">.eps</a> <a href="images/logos/TravisCI-Mascot-red.png" download="TravisCI-Mascot-red.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="../images/logos/TravisCI-Mascot-pride.svg" alt="Mascot">
+            {{svg-jar 'TravisCI-Mascot-pride' alt='Mascot'}}
             <figcaption class="text-small"><a href="images/logos/TravisCI-Mascot-pride.eps" download="TravisCI-Mascot-pride.eps" title="">.eps</a> <a href="images/logos/TravisCI-Mascot-pride.png" download="TravisCI-Mascot-pride.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="../images/logos/TravisCI-Mascot-pride-4.svg" alt="Mascot">
+            {{svg-jar 'TravisCI-Mascot-pride-4' alt='Mascot'}}
             <figcaption class="text-small"><a href="images/logos/TravisCI-Mascot-pride-4.eps" download="TravisCI-Mascot-pride-4.eps" title="">.eps</a> <a href="images/logos/TravisCI-Mascot-pride-4.png" download="TravisCI-Mascot-pride-4.png" title="">.png</a></figcaption>
           </figure>
         </li>
       </ul>
       <ul class="list--mascot">
         <li>
           <figure>
-            <img src="../images/logos/Tessa-1.svg" alt="Tessa">
+            {{svg-jar 'Tessa-1' alt='Tessa'}}
             <figcaption class="text-small"><a href="images/logos/Tessa-1.eps" download="Tessa-1.eps" title="">.eps</a> <a href="images/logos/Tessa-1.png" download="Tessa-1.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="../images/logos/Tessa-2.svg" alt="Tessa">
+            {{svg-jar 'Tessa-2' alt='Tessa'}}
             <figcaption class="text-small"><a href="images/logos/Tessa-2.eps" download="Tessa-2.eps" title="">.eps</a> <a href="images/logos/Tessa-2.png" download="Tessa-2.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="../images/logos/Tessa-3.svg" alt="Tessa">
+            {{svg-jar 'Tessa-3' alt='Tessa'}}
             <figcaption class="text-small"><a href="images/logos/Tessa-3.eps" download="Tessa-3.eps" title="">.eps</a> <a href="images/logos/Tessa-3.png" download="Tessa-3.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="../images/logos/Tessa-4.svg" alt="Tessa">
+            {{svg-jar 'Tessa-4' alt='Tessa'}}
             <figcaption class="text-small"><a href="images/logos/Tessa-4.eps" download="Tessa-4.eps" title="">.eps</a> <a href="images/logos/Tessa-4.png" download="Tessa-4.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="../images/logos/Tessa-pride.svg" alt="Tessa">
+            {{svg-jar 'Tessa-pride' alt='Tessa'}}
             <figcaption class="text-small"><a href="images/logos/Tessa-pride.eps" download="Tessa-pride.eps" title="">.eps</a> <a href="images/logos/Tessa-pride.png" download="Tessa-pride.png" title="">.png</a></figcaption>
           </figure>
         </li>
         <li>
           <figure>
-            <img src="../images/logos/Tessa-pride-4.svg" alt="Tessa">
+            {{svg-jar 'Tessa-pride-4' alt='Tessa'}}
             <figcaption class="text-small"><a href="images/logos/Tessa-pride-4.eps" download="Tessa-pride-4.eps" title="">.eps</a> <a href="images/logos/Tessa-pride-4.png" download="Tessa-pride-4.png" title="">.png</a></figcaption>
           </figure>
         </li>

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -2,6 +2,7 @@
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 const Funnel = require('broccoli-funnel');
+const SVGO = require('svgo');
 
 module.exports = function () {
   let fingerprint;
@@ -56,6 +57,22 @@ module.exports = function () {
         'public/images/stroke-icons',
         'public/images/svg'
       ]
+    },
+    svgJar: {
+      optimizer: {
+        svgoModule: SVGO,
+        plugins: [
+          { removeViewBox: false },
+          { removeTitle: false },
+          { removeDesc: false },
+          {
+            inlineStyles: {
+              onlyMatchedOnce: false,
+              removeMatchedSelectors: true
+            }
+          }
+        ]
+      }
     }
   });