SVG Logo image code

Report · Feb 03, 2017

I have a design in Dreamweaver that uses SVG for the logo along with <g> and <path d=...> tags containing lengthy code. I wish to replace this with my client's logo, which I created in Illustrator and Photoshop and exported to SVG. How do I now get this logo into the code? The design doesn't appear to reference an image filename for the logo on the page or in style.css. Alternatively, I nixed the whole SVG attempt and referenced the logo as a jpg, then as a .png using <img src=..> but the quality was so poor, I'd like to see if I can successfully add the logo using SVG with your help if you think it will improve rendering of the logo on retinal displays. Adobe support pointed me to the forum for help with this.

Link to site in test directory: testdev.digitalinkllc.com

New logo in PNG:

Note, the logo moves to the center when the window is resized. It also becomes gray when resized to the mobil layout.

Here is a bit of the current code for the logo section which I am trying to duplicate for my new logo. (There are several more <path d=..> tags not copied here)

<g>

Report · Feb 03, 2017

Personally, I would not use Photoshop for SVGs. I think Illustrator is a much better tool for this.

If it's still a vector graphic -- an .ai file (and let's hope so because jpg is no good for SVG), you want to open your image in Illustrator and Export to SVG. See screenshot below for the setting I use.

This will produce an SVG image suitable for inserting into your DW document with the SRC tag.

As an example of the code I use in a Bootstrap layout with the img-responsive class (adjust the inline style height & width to suit.

<img class="img-responsive center-block" src="img/my-logo.svg" alt="my logo" style="height:50%; width:50%">

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 03, 2017

To use an image with svg you would use, (no pun intender here) the <use> element with an xpath -

https://developer.mozilla.org/en/docs/Web/SVG/Element/use

You could also insert the image using the image tag, but this is best done once the image is converted to a base64 encoding format, though just using a link inside the svg will work -

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

Report · Feb 03, 2017

neither of these solutions worked

Report · Feb 03, 2017

What does "didn't work" mean exactly? You couldn't export an SVG file directly from Illustrator?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 03, 2017

In keeping with what Paula has said, have a look at the following

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
  <defs>
  <symbol id="logo" viewbox="0 0 230 51" width="230px" height="51px">
  <path d="M83.389,33.077c0,0.46,0.368,0.736,0.828,0.736c0.828,0,1.334-0.506,4.049-2.53l0.828,1.1 96 c-2.208,2.208-6.119,5.935-9.385,5.935c-1.656,0-2.346-1.288-2.346-2.761c0-0.367-0.69-0.321 ,3.358-7.774l-10.029,0.322 l-9.431,9.385c-1.104,1.104-2.852,3.036-4.508,3.036c-0.69,0-1.61-0.138-1.61-1.012c0-1.519, 3.542-5.935,7.867-7.453l3.588-3.956 c-2.944,0.092-4.462,0.275-4.462-0.92c0-0.875,3.358-4.739,5.797-5.521c1.794-0.598,4.278-0. 966,4.278-0.322 c0,0.828-3.358,0.414-3.358,1.242c0,0.322,0.414,0.414,0.644,0.414c0.736-0.046,2.623-0.138, 2.807-0.138l10.305-8.557 c4.508-3.727,10.029-7.913,12.099-7.913c0.966,0,1.61,1.15,1.61,1.979c0,0.966-0.966,2.53-1. 426,3.358l-5.705,9.983 c3.404,0,1.334-0.46,4.232,0.184c-1.334,1.564-2.438,3.404-3.45,5.244l-3.681,0.185L83.389,3 3.077z M90.382,11.501l-0.092-0.092 L76.994,22.404l0.092,0.092l7.039-0.506L90.382,11.501z"></path>
  <path d="M110.297,18.816c-2.162,4.371-2.53,6.073-7.59,5.75c-1.564,2.024-4.187,5.797-4.187,8.557 c0,1.013,0.322,1.61,1.38,1.61c1.472,0,3.128-1.38,7.913-4.784l0.23,2.024c-2.714,2.484-7.68 3,7.406-11.593,7.406 c-1.794,0-2.898-1.242-2.898-3.082c0-1.519,0.598-3.267,1.196-4.601l-0.092-0.092l-2.347,1.8 86l-0.506-1.748 c2.76-2.116,5.291-4.462,6.993-7.361c-2.806,0-1.932-0.184-4.371,0.184l0.506-0.828c2.484-4. 048,2.852-4.785,7.775-4.968 c1.38-1.886,2.392-4.049,5.061-4.049c0.598,0,1.472,0.138,1.472,0.874c0,0.828-1.334,2.347-1 .794,2.991L110.297,18.816z"></path>
  </symbol>
  </defs>
</svg>
</head>
<body>
<svg><use xlink:href="#logo"></use></svg>
</body>
</html>

You can add the remaining paths within the symbol tags. If you need to do some magic, like colour change, add an ID to the path and use that as the CSS selector.

Having said that, have you thought of having text within the SVG? Have a look at SVG `text` and Small, Scalable, Accessible Typographic Designs | CSS-Tricks for more on the subject.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 03, 2017

I have recreated the logo using Illustrator, saved it as svg and got the following code. Not sure what to do with this, though.

From Illustrator:

<?xml version="1.0" encoding="utf-8"?>

viewBox="0 0 1081.4 207.3" style="enable-background:new 0 0 1081.4 207.3;" xml:space="preserve">

.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#21205F;}

.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#808080;}

.st2{fill:#21205F;}

.st3{font-family:'Copperplate';}

.st4{font-size:70px;}

.st5{font-size:105px;}

.st6{fill:#666766;}

.st7{font-family:'Copperplate-Bold';}

.st8{font-size:30px;}

</style>

<path class="st1" d="M151.9,40.2H93.6H35.4c-2.8,0-5.1,2.3-5.1,5.1v0c0,2.8,2.3,5.1,5.1,5.1h58.3h58.3c2.8,0,5.1-2.3,5.1-5.1v0

C157,42.5,154.7,40.2,151.9,40.2"/>

<path class="st0" d="M40.7,56.4h106v70.2c-2.1,0.6-4.2,1.3-6.3,1.9c-3.4,1.1-6.8,2.1-10.3,3.3V79.1c0-4.2-3.4-7.6-7.6-7.6

c-4.2,0-7.6,3.4-7.6,7.6V137c-4.6,1.7-9.2,3.4-13.7,5.2v-63c0-4.2-3.4-7.6-7.6-7.6s-7.6,3.4-7.6,7.6v69.2c-4.6,2-9.2,4-13.7,6.1

V79.1c0-4.2-3.4-7.6-7.6-7.6c-4.2,0-7.6,3.4-7.6,7.6v82.7c-5.6,2.8-11.1,5.8-16.5,8.8V56.4z"/>

<path class="st1" d="M213.4,121.5C185.1,121.5,74,148.8,0,207.3c53.2-27,132.8-64.5,213.4-64.5C213.4,121.5,213.4,121.5,213.4,121.5

"/>

<text transform="matrix(1 0 0 1 420.6504 54.2497)" class="st2 st3 st4">Law Office of</text>

<text transform="matrix(1 0 0 1 232.6504 142.6509)" class="st2 st3 st5">Jack W. Bolling</text>

<text transform="matrix(1 0 0 1 452.6504 194.6509)" class="st6 st7 st8">a professional corporation</text>

</svg>

Report · Feb 03, 2017

That turned out to be too large, I resized and exported new code. Still working on it.

Report · Feb 03, 2017

Try

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none">
  <defs>
  <symbol id="Layer_1" viewBox="0 0 1081.4 207.3" style="enable-background:new 0 0 1081.4 207.3;" xml:space="preserve">
  <style type="text/css">
  .st0 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #21205F;
  }
  .st1 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #808080;
  }
  .st2 {
  fill: #21205F;
  }
  .st3 {
  font-family: 'Copperplate';
  }
  .st4 {
  font-size: 70px;
  }
  .st5 {
  font-size: 105px;
  }
  .st6 {
  fill: #666766;
  }
  .st7 {
  font-family: 'Copperplate-Bold';
  }
  .st8 {
  font-size: 30px;
  }
  </style>
  <path class="st0" d="M161.7,19.7H93.6H25.5v7.8c0,4.3,3.5,7.8,7.8,7.8h60.3H154c4.3,0,7.8-3.5,7.8-7.8V19.7z"/>
  <path class="st1" d="M151.9,40.2H93.6H35.4c-2.8,0-5.1,2.3-5.1,5.1v0c0,2.8,2.3,5.1,5.1,5.1h58.3h58.3c2.8,0,5 .1-2.3,5.1-5.1v0 C157,42.5,154.7,40.2,151.9,40.2"/>
  <polygon class="st1" points="10.9,6 93.6,6 176.3,6 176.3,14.5 93.6,14.5 10.9,14.5 "/>
  <path class="st0" d="M40.7,56.4h106v70.2c-2.1,0.6-4.2,1.3-6.3,1.9c-3.4,1.1-6.8,2.1-10.3,3.3V79.1c0-4.2-3.4- 7.6-7.6-7.6 c-4.2,0-7.6,3.4-7.6,7.6V137c-4.6,1.7-9.2,3.4-13.7,5.2v-63c0-4.2-3.4-7.6-7.6-7.6s-7.6,3.4- 7.6,7.6v69.2c-4.6,2-9.2,4-13.7,6.1 V79.1c0-4.2-3.4-7.6-7.6-7.6c-4.2,0-7.6,3.4-7.6,7.6v82.7c-5.6,2.8-11.1,5.8-16.5,8.8V56.4z"/>
  <path class="st1" d="M213.4,121.5C185.1,121.5,74,148.8,0,207.3c53.2-27,132.8-64.5,213.4-64.5C213.4,121.5,21 3.4,121.5,213.4,121.5"/>
  <text transform="matrix(1 0 0 1 420.6504 54.2497)" class="st2 st3 st4">Law Office of</text>
  <text transform="matrix(1 0 0 1 232.6504 142.6509)" class="st2 st3 st5">Jack W. Bolling</text>
  <text transform="matrix(1 0 0 1 452.6504 194.6509)" class="st6 st7 st8">a professional corporation</text>
  </symbol>
  </defs>
  </svg>
</head>
<body>
  <svg>
  <use xlink:href="#Layer_1"></use>
  </svg>
</body>
</html>

Just a couple of notes:

experiment with Illustrator to reduce the number of decimal points with a view of reducing the size
having the style rules contained within the SVG is too restrictive. Move them into a style sheet, easier to modify.
have a look at Everything You Need To Know About SVG | CSS-Tricks

Good luck!

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 05, 2017

Complete silence, so I thought I would play around a bit.

1. Created a new file structure

site root
     css
          styles.css
      img
           img.svg
     index.html

2. Created styles.css

body {
padding: 20px;
}
svg.logo-lg {
width: 80%;
height: auto;
}
/* styling for SVG */
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #21205F;
}
.st1 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #808080;
}
.st2 {
fill: #21205F;
}
.st3 {
font-family: 'Copperplate';
}
.st4 {
font-size: 70px;
}
.st5 {
font-size: 105px;
}
.st6 {
fill: #666766;
}
.st7 {
font-family: 'Copperplate-Bold';
}
.st8 {
font-size: 30px;
}
.button {
fill: red;
}
.image {
fill: white;
}

3. Created img.svg, adding an extra symbol as an example

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none">
<defs>
<symbol id="logo" viewBox="0 0 1081.4 207.3" style="enable-background:new 0 0 1081.4 207.3;" xml:space="preserve">
<title>Company Logo</title>
<path class="st0" d="M161.7,19.7H93.6H25.5v7.8c0,4.3,3.5,7.8,7.8,7.8h60.3H154c4.3,0,7.8-3.5,7.8-7.8V19.7z"/>
<path class="st1" d="M151.9,40.2H93.6H35.4c-2.8,0-5.1,2.3-5.1,5.1v0c0,2.8,2.3,5.1,5.1,5.1h58.3h58.3c2.8,0,5 .1-2.3,5.1-5.1v0 C157,42.5,154.7,40.2,151.9,40.2"/>
<polygon class="st1" points="10.9,6 93.6,6 176.3,6 176.3,14.5 93.6,14.5 10.9,14.5 "/>
<path class="st0" d="M40.7,56.4h106v70.2c-2.1,0.6-4.2,1.3-6.3,1.9c-3.4,1.1-6.8,2.1-10.3,3.3V79.1c0-4.2-3.4- 7.6-7.6-7.6 c-4.2,0-7.6,3.4-7.6,7.6V137c-4.6,1.7-9.2,3.4-13.7,5.2v-63c0-4.2-3.4-7.6-7.6-7.6s-7.6,3.4- 7.6,7.6v69.2c-4.6,2-9.2,4-13.7,6.1 V79.1c0-4.2-3.4-7.6-7.6-7.6c-4.2,0-7.6,3.4-7.6,7.6v82.7c-5.6,2.8-11.1,5.8-16.5,8.8V56.4z"/>
<path class="st1" d="M213.4,121.5C185.1,121.5,74,148.8,0,207.3c53.2-27,132.8-64.5,213.4-64.5C213.4,121.5,21 3.4,121.5,213.4,121.5"/>
<text transform="matrix(1 0 0 1 420.6504 54.2497)" class="st2 st3 st4">Law Office of</text>
<text transform="matrix(1 0 0 1 232.6504 142.6509)" class="st2 st3 st5">Jack W. Bolling</text>
<text transform="matrix(1 0 0 1 452.6504 194.6509)" class="st6 st7 st8">a professional corporation</text>
</symbol>
<symbol id="icon-video" viewBox="0 0 1024 721" aria-labeledby="title">
<title>YouTube Play Button</title>
<path class="button" d="M1023.6,361.5c0,24.5,0.9,49-0.2,73.5c-1.7,36.6-4.7,73.1-7.3,109.6c-2,28.9-8.5,56.9-19.3,83.8
c-18.2,45.4-52.8,70.6-100,78.3c-23.1,3.8-46.7,4.9-70.1,6.1c-41.1,2.1-82.2,3.5-123.3,5c-22.1,0.8-44.3,1.1-66.4,1.5
c-42.3,0.6-84.6,1.5-126.9,1.3c-46.1-0.1-92.3-1-138.4-1.9c-36.6-0.7-73.2-1.6-109.9-3c-30.8-1.2-61.6-2.4-92.2-5
c-19-1.6-38.1-4.6-56.6-9.3c-43-11.1-71.6-38.4-86-80.7c-8.9-26-14.7-52.5-16.6-79.9c-2.5-35.4-5.8-70.7-6.7-106.1
C2.5,389.7,2.8,344.9,3.3,300c0.5-48,4-95.8,10.1-143.4c3.3-25.8,10.5-50.9,22.3-74.2c18.4-36.2,48.9-57,87.9-65
c17.2-3.5,34.9-4.9,52.5-5.9c38.2-2.2,76.5-3.9,114.7-5.2c32.9-1.2,65.9-1.7,98.9-2.3c25.6-0.5,51.3-0.8,76.9-1
c24.3-0.2,48.6-0.5,73-0.5c30.3,0.1,60.6,0.5,90.9,1c28.6,0.5,57.3,1,85.9,2c44.6,1.7,89.2,3.5,133.7,5.9
c21.2,1.1,42.7,2.1,63.2,8.2c44.1,13.2,73,41.9,87.5,85.7c8.8,26.7,14.1,54,15.9,82c2.2,34.2,5,68.4,6.5,102.7
C1024.5,313.8,1023.7,337.6,1023.6,361.5C1023.6,361.5,1023.6,361.5,1023.6,361.5z M408.2,494c92.1-47.8,183.5-95.1,275.9-143
c-92.5-48.3-183.9-96-275.9-144C408.2,303,408.2,397.9,408.2,494z"/>
<path class="image" d="M408.2,494c0-96.1,0-191,0-287c92,48,183.4,95.7,275.9,144C591.6,398.9,500.3,446.3,408.2,494z"/>
</symbol>
</defs>
</svg>

4. Created index.html

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<svg>
<use xlink:href="img/img.svg#logo"></use>
</svg>
<h2>Another instance of the logo</h2>
<svg class="logo-lg">
<use xlink:href="img/img.svg#logo"></use>
</svg>
<h2>And this is my YouTube button</h2>
<svg class="logo-lg">
<use xlink:href="img/img.svg#icon-video"></use>
</svg>
</body>
</html>

And this is the result

Edit:

Did I say how excited I am that this is possible? Who needs image sprites to reduce the number of requests? Think of the versatility in using CSS to change the fill colour and/or create animations. Check the file size, in our case 3KB for two images. Bring it on!

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 06, 2017

BenPleysier wrote:
Complete silence, so I thought I would play around a bit.
1. Created a new file structure
site root
css
styles.css
img
img.svg
index.html
2. Created styles.css
body {
padding: 20px;
}
svg.logo-lg {
width: 80%;
height: auto;
}
/* styling for SVG */
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #21205F;
}
.st1 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #808080;
}
.st2 {
fill: #21205F;
}
.st3 {
font-family: 'Copperplate';
}
.st4 {
font-size: 70px;
}
.st5 {
font-size: 105px;
}
.st6 {
fill: #666766;
}
.st7 {
font-family: 'Copperplate-Bold';
}
.st8 {
font-size: 30px;
}
.button {
fill: red;
}
.image {
fill: white;
}
3. Created img.svg, adding an extra symbol as an example
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none">
<defs>
<symbol id="logo" viewBox="0 0 1081.4 207.3" style="enable-background:new 0 0 1081.4 207.3;" xml:space="preserve">
<title>Company Logo</title>
<path class="st0" d="M161.7,19.7H93.6H25.5v7.8c0,4.3,3.5,7.8,7.8,7.8h60.3H154c4.3,0,7.8-3.5,7.8-7.8V19.7z"/ >
<path class="st1" d="M151.9,40.2H93.6H35.4c-2.8,0-5.1,2.3-5.1,5.1v0c0,2.8,2.3,5.1,5.1,5.1h58.3h58.3c2.8,0,5 .1-2.3,5.1-5.1v0 C157,42.5,154.7,40.2,151.9,40.2"/>
<polygon class="st1" points="10.9,6 93.6,6 176.3,6 176.3,14.5 93.6,14.5 10.9,14.5 "/>
<path class="st0" d="M40.7,56.4h106v70.2c-2.1,0.6-4.2,1.3-6.3,1.9c-3.4,1.1-6.8,2.1-10.3,3.3V79.1c0-4.2-3.4- 7.6-7.6-7.6 c-4.2,0-7.6,3.4-7.6,7.6V137c-4.6,1.7-9.2,3.4-13.7,5.2v-63c0-4.2-3.4-7.6-7.6-7.6s-7.6,3.4- 7.6,7.6v69.2c-4.6,2-9.2,4-13.7,6.1 V79.1c0-4.2-3.4-7.6-7.6-7.6c-4.2,0-7.6,3.4-7.6,7.6v82.7c-5.6,2.8-11.1,5.8-16.5,8.8V56.4z" />
<path class="st1" d="M213.4,121.5C185.1,121.5,74,148.8,0,207.3c53.2-27,132.8-64.5,213.4-64.5C213.4,121.5,21 3.4,121.5,213.4,121.5"/>
<text transform="matrix(1 0 0 1 420.6504 54.2497)" class="st2 st3 st4">Law Office of</text>
<text transform="matrix(1 0 0 1 232.6504 142.6509)" class="st2 st3 st5">Jack W. Bolling</text>
<text transform="matrix(1 0 0 1 452.6504 194.6509)" class="st6 st7 st8">a professional corporation</text>
</symbol>
<symbol id="icon-video" viewBox="0 0 1024 721" aria-labeledby="title">
<title>YouTube Play Button</title>
<path class="button" d="M1023.6,361.5c0,24.5,0.9,49-0.2,73.5c-1.7,36.6-4.7,73.1-7.3,109.6c-2,28.9-8.5,56.9-19. 3,83.8
c-18.2,45.4-52.8,70.6-100,78.3c-23.1,3.8-46.7,4.9-70.1,6.1c-41.1,2.1-82.2,3.5-123.3,5c-22 .1,0.8-44.3,1.1-66.4,1.5
c-42.3,0.6-84.6,1.5-126.9,1.3c-46.1-0.1-92.3-1-138.4-1.9c-36.6-0.7-73.2-1.6-109.9-3c-30.8 -1.2-61.6-2.4-92.2-5
c-19-1.6-38.1-4.6-56.6-9.3c-43-11.1-71.6-38.4-86-80.7c-8.9-26-14.7-52.5-16.6-79.9c-2.5-35 .4-5.8-70.7-6.7-106.1
C2.5,389.7,2.8,344.9,3.3,300c0.5-48,4-95.8,10.1-143.4c3.3-25.8,10.5-50.9,22.3-74.2c18.4-3 6.2,48.9-57,87.9-65
c17.2-3.5,34.9-4.9,52.5-5.9c38.2-2.2,76.5-3.9,114.7-5.2c32.9-1.2,65.9-1.7,98.9-2.3c25.6-0 .5,51.3-0.8,76.9-1
c24.3-0.2,48.6-0.5,73-0.5c30.3,0.1,60.6,0.5,90.9,1c28.6,0.5,57.3,1,85.9,2c44.6,1.7,89.2,3 .5,133.7,5.9
c21.2,1.1,42.7,2.1,63.2,8.2c44.1,13.2,73,41.9,87.5,85.7c8.8,26.7,14.1,54,15.9,82c2.2,34.2 ,5,68.4,6.5,102.7
C1024.5,313.8,1023.7,337.6,1023.6,361.5C1023.6,361.5,1023.6,361.5,1023.6,361.5z M408.2,494c92.1-47.8,183.5-95.1,275.9-143
c-92.5-48.3-183.9-96-275.9-144C408.2,303,408.2,397.9,408.2,494z"/>
<path class="image" d="M408.2,494c0-96.1,0-191,0-287c92,48,183.4,95.7,275.9,144C591.6,398.9,500.3,446.3,408.2 ,494z"/>
</symbol>
</defs>
</svg>
4. Created index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<svg>
<use xlink:href="img/img.svg#logo"></use>
</svg>
<h2>Another instance of the logo</h2>
<svg class="logo-lg">
<use xlink:href="img/img.svg#logo"></use>
</svg>
<h2>And this is my YouTube button</h2>
<svg class="logo-lg">
<use xlink:href="img/img.svg#icon-video"></use>
</svg>
</body>
</html>
And this is the result
Edit:
Did I say how excited I am that this is possible? Who needs image sprites to reduce the number of requests? Think of the versatility in using CSS to change the fill colour and/or create animations. Check the file size, in our case 3KB for two images. Bring it on!

But that's just one image, say you have a dozen different logos that need to be displayed, would you really want all that coding in your page??

I'm on the fence about this one as to if you directly link the image:

or include the instance in the <use> tag.

If I didn't need to manipulate the images using css I think I would prefer to keep the page 'clean' myself.

Report · Feb 06, 2017

But that's just one image, say you have a dozen different logos that need to be displayed, would you really want all that coding in your page??

I placed two images in the example SVG file. If you have a look, each has their own symbol and title elements. In reality, this can be expanded to include a lot more images. The two images are included in your document by using the USE element as in

and

The SVG code is inside an external SVG file, similar to JS or CSS files.

The whole process is very fluid in that you can have one and/or multiple SVG files, each with/without in-bedded styling. Whatever is best for your workflow. Each method has their own benefit.

In one case, I had to include the SVG code inside my main document because only one browser interpreted the hover effect properly when using an external file. Other browsers misbehaved which makes me think that care should be taken despite the fact that SVG's have been around for over a decade. To see what I mean, have a look at View BunchOBlokes Videos

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 06, 2017

I agree with Ben,

Using svg is no different to using images, and is often more efficient when it comes to the file size. Also the server response time and rendering time is improved if the svg is included in the page code, as there are fewer requests made to the server.

Add to that, it is possible to use base64 for both images and svg, and even though older browsers used to have a slower rendering time if svg and/or base64 was used, this is no longer the case.

Report · Feb 06, 2017

BenPleysier wrote:
But that's just one image, say you have a dozen different logos that need to be displayed, would you really want all that coding in your page??
I placed two images in the example SVG file. If you have a look, each has their own symbol and title elements. In reality, this can be expanded to include a lot more images. The two images are included in your document by using the USE element as in

Ok 2 images, its still not a dozen. I can see this being useful in certain critera but I think some more thought needs to go into if you dont require the images to do anything.

For instance if you have a row of logos at the foot of your page as many websites do I cant see fillng up the page with code is that useful, in my opinion its better to link direct to the svg using an image tag. On the other hand if you have a couple of images and for whatever reason need some interactivity (using css) and maybe the same image repeated in several sizes I can see the <use> tag being 'useful'.

Unless the OP wants to hover over part of the logo and change its color or something why not just link directly to the svg?

Report · Feb 06, 2017

Ok 2 images, its still not a dozen.

I have shown just two images and you can build on that. There is no limit to the number of images within a properly structured SVG.

I cant see fillng up the page with code is that useful, in my opinion its better to link direct to the svg using an image tag.

The way to link to an external SVG is by using the following in your markup

<svg><use xlink:href="path/svg_name.svg#ID-of-image"></use></svg>

No need for the code to be included in the main document unless you use Paula's valid reason to reduce the number of requests.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 06, 2017

BenPleysier wrote:
The way to link to an external SVG is by using the following in your markup
<svg><use xlink:href="path/svg_name.svg#ID-of-image"></use></svg>
No need for the code to be included in the main document unless you use Paula's valid reason to reduce the number of requests.

Whats the advantage of using:

over using:

<img src="path/svg_name.svg"> ?

other than the fact I like the <svg> link as it's clearer as to what it is.

Report · Feb 06, 2017

Problems when using <img> -

You cannot manipulate the image with JavaScript.
If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)
You cannot restyle the image with CSS pseudoclasses (like :focus).

Once svg2 is implemented then the above will not fully apply.

That said <svg> should also be used sparingly, if you are applying any of the above points to the svg code.

Report · Feb 06, 2017

pziecina wrote:
Problems when using <img> -
You cannot manipulate the image with JavaScript.
If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)
You cannot restyle the image with CSS pseudoclasses (like :focus).
Once svg2 is implemented then the above will not fully apply.
That said <svg> should also be used sparingly, if you are applying any of the above points to the svg code.

I think you're just really repeating what I have already said in a previous post, there is no advantage unless you want to manipulate the image to include some js or css.

So rather than just including things for the sake of including them you have to weigh up what the end result is going to be and choose the workflow based on that.

The only advantage I can see of using the below in the case of a logo or symbol being 'static' is that its rather nice as it immedaiately reflects the format being used:

rather than

as the format is 'buried' within an <img> tag which is harder to detect if you are scrolling through code. howver that maybe not be an issue for the code challenged who probably have never encounter the <use> tag before.

Report · Feb 06, 2017

You are making the same mistake the Dw dev team does, and thinking everything will remain the same, and if it does not one can ignore it anyway, (just thought I would get my complaint in for today )

It's not so much now that the difference will be important, but in the future. SVG 2, is slowly being incorporated, along with http 2 support in browsers. This means that multiple requests are possible, and simultaneous downloads, if you are using the img tag for svg, then the browser must wait until it has completed the pre-rendering of the img, (which is really an svg) and then check that all referenced css and javascript is also downloaded, before it can complete the rendering. With the svg tag these can be done after the initial rendering, much like including the js at the bottom of the html, (which is really redundant by-the-way).

Report · Feb 06, 2017

I had set up my hopes on SVG 2 until I cam across The SVG 2 Conundrum | CSS-Tricks

A few other comments:

browsers are sadly lacking full support
Illustrator is doing a great job
Dreamweaver is lagging behind e.g. fill, fill-rule, clip-rule etc are not recognised
many developers are satisfied with the status quo

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 06, 2017

As I have said before Ben, and as Osgood has confirmed in his answer -

Most people do not use anything new, unless the web dev tool they are using supports it, and if they don't use it or ask for its support, browsers will also not develop their support further.

Chicken and Egg situation.

I will retire permanently within the next 2 years, so I can afford to ignore what is, and is not used by others, or supported in any tools used. Those who will not retire until well after that time, can ignore what is happening if they wish, and hope that nothing changes to clients web dev requirements.

Report · Feb 06, 2017

Have a look at the source code of the link that I gave you, namely The SVG 2 Conundrum | CSS-Tricks and see the number of different ways that page is using SVG.

In contrast to Flexbox, Grid, etc, SVG has been around for a long time. The problem is more than just the Chicken (specifications) and the Egg (developers), there is also a Rooster (browsers) to consider. Without the Rooster, there will be no Chicken and the Egg remains barren.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 06, 2017

pziecina wrote:
Those who will not retire until well after that time, can ignore what is happening if they wish, and hope that nothing changes to clients web dev requirements.

But they wont ignore what is happening, they will move when the time is right. It's always been that way. I moved from tables to <divs> kicking and shouting and from floats to Flexbox, unwillingly but as a necessity to try and keep up with current trends. I'll move again if I see something filter through into main-stream development if I'm still around and so will many more. I'm not seeing a great deal of movement at the moment in what I call 'must have skillsets' except for Flexbox usage which is starting to slowly gain momentum, after years in the wildermess, and I think that is because developers are now confident that it is ready to use. The more that use it the more the momentum.

Theres plenty out there to entertain developers if they have time to kill but nothing which is critical to their ability to produce websites. Grids will be the next critical step but my opinion is that is probably 2 years + away before we see it where Flexbox is today.

Report · Feb 06, 2017

browsers are sadly lacking full support
Illustrator is doing a great job

I agree with both of these, Ben. The other points I don't know about.

If one thinks of SVG as an image format, then the advantages over other formats are nice, but not deal breakers.

If one thinks of SVG as code that renders images and can be manipulated programmatically, then it becomes very exciting.

Report · Feb 06, 2017

Rob Hecker2 wrote:
If one thinks of SVG as an image format, then the advantages over other formats are nice, but not deal breakers.

I think the only deal breaker is hi-definition screens which puzzles me as to why svg is still dragging it's feet. You would think that every new website out there would choose svg over png or gif but, no. There's no disadvantage to using svg, even just as an image link, so whats going on?

SVG Logo image code

1 Correct answer