Is it possible to use a sprite.svg file instead of sprite.png file?

Question

Re: PHP Basics -- foreach

Hampton, I tried using an icomoon sprite.svg file, but nothing showed up on my browser (FIrefox). Does that mean you can only use png sprites/images in php?

Answer 1 · 2015-06-17T15:43:51Z

June 17, 2015 3:43pm

My svg sprite array items now have working links attached!! I just found this Treehouse forum post and Andrew Rickards' solution worked!!!

This is the new HTML (Note: svg class is changed back to span class):

<?php

$social_links = array(

    'twitter'   => array( "href" => "http://www.twitter.com",  "icon" => "twitter" ),
    'google'    => array( "href" => "http://plus.google.com",  "icon" => "google" ),
    'facebook'  => array( "href" => "http://www.facebook.com", "icon" => "facebook" ),
);


?>

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>PHP SVG</title>
            <link rel="stylesheet" type="text/css" href="css/style.css">
        </head>

        <body>

        <svg display="none" width="0" height="0" version="1.1" xmlns="http://www." xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icongoogle" viewBox="0 0 1024 1024">
    <title>google</title>
    <path class="path1" d="M789.534 64c0 0-200.956 0-267.94 0-120.122 0-233.17 91.006-233.17 196.422 0 107.726 81.882 194.666 204.088 194.666 8.498 0 16.756-0.17 24.84-0.752-7.928 15.186-13.6 32.288-13.6 50.042 0 29.938 16.104 54.21 36.468 74.024-15.386 0-30.242 0.448-46.452 0.448-148.782-0.002-263.3 94.76-263.3 193.022 0 96.778 125.542 157.312 274.334 157.312 169.624 0 263.306-96.244 263.306-193.028 0-77.602-22.896-124.072-93.686-174.134-24.216-17.142-70.532-58.836-70.532-83.344 0-28.72 8.196-42.868 51.428-76.646 44.312-34.624 75.674-83.302 75.674-139.916 0-67.406-30.022-133.098-86.374-154.772h84.956l59.96-43.344zM695.948 719.458c2.126 8.972 3.284 18.208 3.284 27.628 0 78.2-50.39 139.31-194.974 139.31-102.842 0-177.116-65.104-177.116-143.3 0-76.642 92.126-140.444 194.964-139.332 24 0.254 46.368 4.116 66.668 10.69 55.828 38.828 95.876 60.76 107.174 105.004zM531.286 427.776c-69.038-2.064-134.636-77.226-146.552-167.86-11.916-90.666 34.37-160.042 103.388-157.99 69.008 2.074 134.636 74.814 146.558 165.458 11.906 90.66-34.39 162.458-103.394 160.392z"></path>
</symbol>
<symbol id="iconfacebook" viewBox="0 0 1024 1024">
    <title>facebook</title>
    <path class="path1" d="M672 192c-88.366 0-160 71.634-160 160v96h-128v128h128v448h128v-448h144l32-128h-176v-96c0-17.672 14.326-32 32-32h160v-128h-160z"></path>
</symbol>
<symbol id="icontwitter" viewBox="0 0 1024 1024">
    <title>twitter</title>
    <path class="path1" d="M1024 194.418c-37.676 16.708-78.164 28.002-120.66 33.080 43.372-26 76.686-67.17 92.372-116.23-40.596 24.078-85.556 41.56-133.41 50.98-38.32-40.83-92.922-66.34-153.346-66.34-116.022 0-210.088 94.058-210.088 210.078 0 16.466 1.858 32.5 5.44 47.878-174.6-8.764-329.402-92.4-433.018-219.506-18.084 31.028-28.446 67.116-28.446 105.618 0 72.888 37.088 137.192 93.46 174.866-34.438-1.092-66.832-10.542-95.154-26.278-0.020 0.876-0.020 1.756-0.020 2.642 0 101.788 72.418 186.696 168.522 206-17.626 4.8-36.188 7.372-55.348 7.372-13.538 0-26.698-1.32-39.528-3.772 26.736 83.46 104.32 144.206 196.252 145.896-71.9 56.35-162.486 89.934-260.916 89.934-16.958 0-33.68-0.994-50.116-2.94 92.972 59.61 203.402 94.394 322.042 94.394 386.422 0 597.736-320.124 597.736-597.744 0-9.108-0.206-18.168-0.61-27.18 41.056-29.62 76.672-66.62 104.836-108.748z"></path>
</symbol>
</defs>
</svg>


<ul class="social">
    <?php foreach($social_links as $social_link) : ?>
        <li>
            <a href="<?php echo $social_link["href"]; ?>">
                <span class="icon <?php echo $social_link["icon"]; ?>"></span>
            </a>
        </li>
    <?php endforeach; ?>
</ul>

        </body>
    </html>

Thank you to everyone!!!

Answer 2 · 2015-06-16T13:02:35Z

June 16, 2015 1:02pm

Because php is a server side language, it should have no impact on the front end - in other words, there must be another reason why you're having issues with your images.

Why not start off by checking you've correctly referenced the image - it might be something like an incorrect file name :)

Answer 3 · 2015-06-17T01:28:29Z

June 17, 2015 1:28am

Hi Tom,

Thanks very much for pointing me in the right direction -- Finally got things to work:

Placed the svgdefs.svg file code (from icomoon app) inside the body tag.
Changed the span class tag to an svg class tag. (See updated post, below)
These are how the files are arranged in my htdocs folder.
In the css, used the sprite.svg file for the .social .icon url
Then used each of the separate image svg files for each of the different icon urls
Changed all of the background-positions to 0 0 -- Have no idea why this works
Changed the colors of each icon in their respective image svg file by changing the "fill" color
The result is, if I switch around the order in the $social_icons array, they switch their order in the browser: Example 1 and Example 2

Here's the HTML: (Note: See updated HTML in next post, below)

<?php

$social_icons = array('twitter', 'google', 'facebook');

?>

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>PHP SVG</title>
            <link rel="stylesheet" type="text/css" href="css/style.css">
        </head>

        <body>

        <svg display="none" width="0" height="0" version="1.1" xmlns="http://www." xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icongoogle" viewBox="0 0 1024 1024">
    <title>google</title>
    <path class="path1" d="M789.534 64c0 0-200.956 0-267.94 0-120.122 0-233.17 91.006-233.17 196.422 0 107.726 81.882 194.666 204.088 194.666 8.498 0 16.756-0.17 24.84-0.752-7.928 15.186-13.6 32.288-13.6 50.042 0 29.938 16.104 54.21 36.468 74.024-15.386 0-30.242 0.448-46.452 0.448-148.782-0.002-263.3 94.76-263.3 193.022 0 96.778 125.542 157.312 274.334 157.312 169.624 0 263.306-96.244 263.306-193.028 0-77.602-22.896-124.072-93.686-174.134-24.216-17.142-70.532-58.836-70.532-83.344 0-28.72 8.196-42.868 51.428-76.646 44.312-34.624 75.674-83.302 75.674-139.916 0-67.406-30.022-133.098-86.374-154.772h84.956l59.96-43.344zM695.948 719.458c2.126 8.972 3.284 18.208 3.284 27.628 0 78.2-50.39 139.31-194.974 139.31-102.842 0-177.116-65.104-177.116-143.3 0-76.642 92.126-140.444 194.964-139.332 24 0.254 46.368 4.116 66.668 10.69 55.828 38.828 95.876 60.76 107.174 105.004zM531.286 427.776c-69.038-2.064-134.636-77.226-146.552-167.86-11.916-90.666 34.37-160.042 103.388-157.99 69.008 2.074 134.636 74.814 146.558 165.458 11.906 90.66-34.39 162.458-103.394 160.392z"></path>
</symbol>
<symbol id="iconfacebook" viewBox="0 0 1024 1024">
    <title>facebook</title>
    <path class="path1" d="M672 192c-88.366 0-160 71.634-160 160v96h-128v128h128v448h128v-448h144l32-128h-176v-96c0-17.672 14.326-32 32-32h160v-128h-160z"></path>
</symbol>
<symbol id="icontwitter" viewBox="0 0 1024 1024">
    <title>twitter</title>
    <path class="path1" d="M1024 194.418c-37.676 16.708-78.164 28.002-120.66 33.080 43.372-26 76.686-67.17 92.372-116.23-40.596 24.078-85.556 41.56-133.41 50.98-38.32-40.83-92.922-66.34-153.346-66.34-116.022 0-210.088 94.058-210.088 210.078 0 16.466 1.858 32.5 5.44 47.878-174.6-8.764-329.402-92.4-433.018-219.506-18.084 31.028-28.446 67.116-28.446 105.618 0 72.888 37.088 137.192 93.46 174.866-34.438-1.092-66.832-10.542-95.154-26.278-0.020 0.876-0.020 1.756-0.020 2.642 0 101.788 72.418 186.696 168.522 206-17.626 4.8-36.188 7.372-55.348 7.372-13.538 0-26.698-1.32-39.528-3.772 26.736 83.46 104.32 144.206 196.252 145.896-71.9 56.35-162.486 89.934-260.916 89.934-16.958 0-33.68-0.994-50.116-2.94 92.972 59.61 203.402 94.394 322.042 94.394 386.422 0 597.736-320.124 597.736-597.744 0-9.108-0.206-18.168-0.61-27.18 41.056-29.62 76.672-66.62 104.836-108.748z"></path>
</symbol>
</defs>
</svg>

            <ul class="social">
                <?php
                foreach($social_icons as $icon){
                ?>

        <li><svg class="icon <?php echo $icon ?>"></svg></li>


                <?php
                    }
                ?>
      </ul>

        </body>
    </html>

And here's the css:

ul {
    list-style: none;
    margin: 0;
  }

  .social li {
    display: inline-block;
  }

  .social .icon {
    display: block;
    width: 32px;
    height: 32px;
    background: url('images/sprite.svg') no-repeat;
    -webkit-background-size: auto 32px;
    -moz-background-size: auto 32px;
    -o-background-size: auto 32px;
    background-size: auto 32px;
  }

 .social .icon.twitter {
    background-image: url('images/twitter.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    margin: auto;
    height: 32px;
    width: 32px;
}

  .social .icon.facebook {
    background-image: url('images/facebook.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    margin: auto;
    height: 32px;
    width: 32px;
}

  .social .icon.google {
    background-image: url('images/google.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    margin: auto;
    height: 32px;
    width: 32px;
}

Now, if I could just figure out how to attach a link to each array item!!!

Thanks again :)

HL

Answer 4 · 2015-06-19T03:54:32Z

June 19, 2015 3:54am

Another update:

I wanted the option of having the linked icons open in a new page, so I found this solution (thanks Traq!) online:

To have linked icons open in the same page, use the code as it's written in the above HTML.

To have linked icons open in a new page, use this code:

<a href="<?php echo $social_link["href"]; ?>" target="_blank">

Also, I found that when I went back to the original page with the icons, the icon I just clicked had dots around it. To remove them, I added this to my css:

a {
    outline: 0;
  }

Thank you Chris Coyier :)

BTW, the browsers I've used to test all this code in are: Firefox 35.0.5, Chrome Version 43.0.2357.124 (64-bit), and Safari Version 6.2.6 (8537.85.15.3). Locally via MAMP.

Welcome to the Treehouse Community

Looking to learn something new?

hl9

hl9

Is it possible to use a sprite.svg file instead of sprite.png file?

4 Answers

hl9

hl9

thomascawthorn

thomascawthorn

hl9

hl9

hl9

hl9