Image Quality

A graphic designer made some icons for one of my client sites. He started them in Illustrator as vector graphics, then finished them off in Photoshop (300 pixels/inch). Each icon is cut-out like a stencil so that the background colour of the container can show through. After cropping the files were 500 x 500 pixels.

I need an 80 x 80 pixel icon for the home page navigation,

and a 120 x 120 pixel icon for the individual page.

I was able to get a fairly good quality small image, but the larger one seems quite blurry. I tried several different approaches to reducing the icons to those sizes at 72 pixels/inch, but still get the same results.

Is there anyway I can get the larger icon to be as clear as the smaller one?

BTW, I asked the graphic designer for his Illustrator files so I could use vector, but he sent me .eps files from his Adobe Cloud software which my CS6 won’t open.

1 Like

It might be the 72dpi which is getting you. These are 96dpi and are each under 10kb, and don’t look too distorted


1 Like

Ideally you you want the vectors so you can save as SVG. But can’t the designer save as SVG from AI?
But using the bitmapped images, the first thing to do is forget about pixels/inch, that is meaningless for on-screen graphics, you should only be interested in how many pixels wide and high.
But I don’t get why reducing from 500px to 120px would degrade the image. :confused:
Though if you are messing with ppi not px values…

2 Likes

The graphic designer finally sent me .eps files compatible with my version of Illustrator, but they were not cut-outs. So I have given up trying to use .svg images here. It’s just too much work trying to get the right format from him quickly. :frowning:

I was finally able to fix the issue by saving my .psd at 96dpi (thanks, @DaveMaxwell), reset the thumbnail image size from 80x80 to 120x120 for the individual pages, and just use CSS to reduce the size of the thumbnails to 80x80 for the navigation system on the home page.

The complication comes from the fact that this is a WordPress site, and unless I take the time to do some extra coding in my theme, I can only have one featured image per page. So I had to use the same image in both places.

2 Likes

I am currently learning SVG and thought I would have a go at creating the logo from scratch. As you can see from the web-page below I am having trouble with the “body of the man”. If anyone has time on their hands I would be grateful for a solution.

<?php 
  declare(strict_types=1);
  error_reporting(-1);
  ini_set('display_errors', 'true');

  $title = 'Title goes here';

$svgLogo = '
<svg  
    width="500" height="500" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    style="background-color:snow; border:dotted 4px red;"
  >
  <!--
    Notes go here
  -->
  <defs>
    <g id="logoCircles">
      <circle id="outer" cx="250" cy="250" r="240" stroke="blue" stroke-width="15" fill="snow" />
      <circle id="inner" cx="250" cy="250" r="110" stroke="cyan" stroke-width="15" fill="snow" />
    </g>
  </defs>

  <defs>
    <g id="logoPerson">
      <path id="curve" d="M 100 290 q  20 -160 100 0" stroke="red" stroke-width="15" fill="snow" />
      <circle id="head" cx="150" cy="180" r="45"      stroke="red"  stroke-width="15" fill="snow" />
      <path   id="base"  d="M 100 290 l 100 0"        stroke="black" stroke-width="15" fill="lime" />
    </g>
  </defs>

  <use xlink:href="#logoCircles" x="00" y="000" />

  <use xlink:href="#logoPerson"  x="010" y="-50" />
  <use xlink:href="#logoPerson"  x="160" y="-50" />
  <use xlink:href="#logoPerson"  x="090" y="150" />
</svg>';

// render 

?><!DOCTYPE HTML>
<head>
<title> <?= $title ?> </title>
<style type="text/css">
.bgs {background-color:snow;}
.bge {background-color: #eee;}
.bg1 {width: 300px; height: 24px; background-color:#E2AB58; color:#000000;}
.mga {margin:auto;}
.tac {text-align: center}
.vam {vertical-align: middle;}

.logo{margin:4.2em auto; border: dotted 2px red;}
.sz1 {width: 48px; }
.sz2 {width: 96px; }
.sz3 {width:128px; }
.sz4 {width:188px; height: 188px;}
.sz5 {width:428px; height:428px;}
</style>
</head>
<body class="bgs">
  <h1> <?= $title ?> </h1>

  <div class="tac">

    <div class="mga logo sz4">
        <?= $svgLogo ?>
    </div>

  </div>

</body>
</html>


**PNG version:** ![|340x340](upload://ixNQmzV8EgiwXCsrbyVwiAxfNi1.png)

@WebMachine, what are the rgb colors that need to show through from the background?

And, is there ever an occasion when the background color would be white (ie, the icon would be invisible)?

Here’s something to play with :slight_smile:

<!doctype html>
<html lang="uk">
<head>
<!-- https://www.sitepoint.com/community/t/image-quality/229515/6 -->
<title> title goes here </title>
<style type="text/css">
body {background-color: #ccc;}
.mga {margin:auto;}
.w88 {width:88%;}
</style>
</head>
<body>
<h1> Svg </h1>

<dl class="w88 mga">
  <dt>PNG Original</dt>
  <dd>
    <img  src="https://cdn.discourse.org/sitepoint/community/uploads/default/original/3X/9/b/9b8f94b68a090a28b037e78703f8764a2b643ce1.png" width="150" height="150" alt="#" />
  </dd>  
  <dd>  &nbsp; </dd>  

  <dt>SVG Created from Scratch</dt>
  <dd class="w88 mga">

    <svg viewBox="0 0 620 620">
      <defs>
        <g id="logoCircles" stroke="#333" stroke-width="17" fill="none">
          <circle cx="300" cy="302" r="292"/>
          <circle cx="300" cy="300" r="160"/>
        </g>

        <g id="logoPerson" stroke="#333" stroke-width="15" fill="snow">
          <path   d="M 100,350 C 160,100  300,280  300,350" /> 
          <path   d="M100 343 l 200 0"/>
          <circle cx="200" cy="200" r="55"/>
        </g>
      </defs>
      
      <use xlink:href="#logoCircles" x="00" y="000" />
      <use xlink:href="#logoPerson" x="-40" y="-50"/>
      <use xlink:href="#logoPerson" x="230" y="-50"/>
      <use xlink:href="#logoPerson" x="090" y="180"/>
    </svg>

  </dd>  
</dl>  

</body>
</html>
3 Likes

The colours are Red: rgb(192,75,75), Blue: rgb(89,134,188), Green: rgb(81,106,51) and Purple: rgb(91,61,125). The icons are always visible, so no, there will never be white for the background. For the navigation icons, the background switches to a light grey: rgb(187,187,187) on hover.

1 Like

Well, that’s embarrassing… I asked for rgb colors but was thinking HEX colors. Sorry for that, WebMachine.

How do these icons look?

The 5K svg file and a test page to play with…
About-Us-svg testpage.zip (3.6 KB)

The svg was generated from my png using this free online converter

Cheers

1 Like

Many thanks for the test page.

It solved a problem I have had with displaying inline multiple SVG’s which kept complaining that IDs had already been declared. I did try unsuccessfully replacing IDs with CLASSES but it did not work. Saving the inline SVG and displaying a HTML IMG file solved the problem. Image width and height changes the rendered image size exactly how I want it to work.

2 Likes

That’s a handy tool for quick conversions. Though they are not as clean as hand made svgs. I much prefer John’s very slim 1k version and how it re-uses elements from the defs.
But then there is the problem of duplicate IDs if the logo appears more than once.
That was solved by making it an external file referenced in an img. I do find using img the easier and cleaner option for svg as it also avoids cluttering the html with all the in-line svg stuff.
But there are occasions for me where it must be in-line, namely when I want to target svg elements with my css, to create effects like colour change on hover/active etc.

I did try to do something, using John’s example, to attempt to declare the defs once, then re-use in more than one svg logo. But I have so far failed to make it work. The next attempt was to save the defs as a separate file, then try to reference them in the svg that way.

        <svg viewBox="0 0 620 620">
            <use xlink:href="logodefs.svg#logoCircles" x="00" y="000" />
            <use xlink:href="logodefs.svg#logoPerson" x="-40" y="-50"/>
            <use xlink:href="logodefs.svg#logoPerson" x="230" y="-50"/>
            <use xlink:href="logodefs.svg#logoPerson" x="090" y="180"/>
        </svg>

or

        <svg viewBox="0 0 620 620">
            <use xlink:href="logoCircles.svg" x="00" y="000" />
            <use xlink:href="logoPerson.svg" x="-40" y="-50"/>
            <use xlink:href="logoPerson.svg" x="230" y="-50"/>
            <use xlink:href="logoPerson.svg" x="090" y="180"/>
        </svg>

But still could not get it to work, though I’m sure this must be possible somehow.

BTW my usual method for using svg in-line is to still keep it as its own file and insert into the html via a php include. This way it avoids the clutter in the html (at least for the server-side source code) and allows the graphic to be re-used elsewhere and edited globally.

3 Likes

You explain it perfectly. I just looking for this.

1 Like

I have created the following _svg-sama74.svg file with defs and groups which may be included just before the closing </body> statement.


index.php

<?php 
  #declare(strict_types=1);
  error_reporting(-1); ini_set('display_errors',true);
  
  $title = 'SamA74';
  $ref   = 'https://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/';
  $refsp = 'https://www.sitepoint.com/community/t/image-quality/229515/11';

?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> <?= $title ?> </title>
<link href="_style.css" media="all" rel="stylesheet" />
<style type="text/css" media="screen">
#svg1 {clear:both; width:640px; height:400px; margin:4.2em auto; 
       border:dotted 1px red; background-color:#ffa;}
.clb {clear:both;}
.fll {float:left;} .flr {float:right;}             
</style>
</head>
<body>

<h3 class="flr"><a href="<?= $ref ?>"> Sara Soueidan </a> </h3>
<h1 class="fll"> <?= $title ?> </h1>
<h4 class="clb flr"><a href="<?= $refsp ?>"> SitePoint Forum </a> </h4>
<hr class="clb" />

<div id="svg1">
  <svg viewBox="0 0 640 400" >
<!-- #left, #middle and #right groups -->   
    <use xlink:href="#left"   x="10"  y="00"/>
    <use xlink:href="#middle" x="130" y="00"/>
    <use xlink:href="#right"  x="230" y="00"/>

<!-- #s1 CIRCLES --> 
    <use xlink:href="#s1" x="380" y="200" fill="red"/>
    <use xlink:href="#s1" x="380" y="250" fill="snow"/>
    <use xlink:href="#s1" x="380" y="300" fill="cyan"/>

<!-- message -->
    <text x="540" y="388" stroke="blue" font-size="22">SamA74 </text>
  </svg>
</div>

<?php require '_svg-sama74.svg' ?>

  </body>
</html>

include file: **_svg_sama74.svg** - file_siize: 1,432 Bytes (without optmisation) ```
<g id="left" fill="url(#grad1)">
  <circle  id="s1" cx="90" cy= "50" r="42"  stroke="black" stroke-width="3"/>
  <ellipse id="s2" cx="90" cy="250" rx="80" ry="140" stroke="black" stroke-width="3"/>
  <text x="70" y="55" stroke="snow" >#left</text> 
</g>

<g id="middle" fill="url(#grad2)">
  <rect x="2cm" y=".1cm" width="1cm" height="1cm" />
  <rect x="2cm" y="2cm"  width="3cm" height="1cm" />
  <rect x="2cm" y="4cm"  width="3cm" height="6cm"  />
  <text x="2cm" y="1.5cm" stroke="black">#middle</text> 
</g>  

<g id="right" fill="url(#grad3)">
  <rect x="4cm"   y="1cm" width="6cm" height="1cm" />
  <circle id="s3" cx="6cm" cy="0.45cm" r="0.4cm"  stroke="black" />
  <circle id="s4" cx="6cm" cy="3.1cm" r="1cm"  stroke="black" stroke-width = "3"/>
  <text x="4.2cm" y="1.9cm" stroke="snow" >#right</text> 
</g>  
```
Using the DEFS and Groups technique solves the "id already declared" problem.

Unfortunately using DEFS and Groups only works for symbols and/or graphic and does not solve my current problem of trying to reduce TEXT parameters :frowning:

Online Demo

Edit:
Added Pingdom Speed Test

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.