Using SVG format for responsive website banner

HTML & CSS
1

I am very new to responsive design and learning different ways to add a banner on responsive design. There are lots of different options but it seems to me that adding svg format banner would be easy. It will resize nicely and I don’t have to add extra code.

If I add background image and add text on top, I need to add lot of code to format text and align etc. Let me know if you have used svg banner before. Thank you!

2

Hi there swebguru,

before you go down the SVG route, do you
consider this example to be to much code…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background: #f0f0f0;
 }

h1 { 
    display: flex;
    width: 50vw;
    height:30.864vw; /* 50:30.864 is the image's aspect ratio */
    align-items: center;
    justify-content: center;
    margin: auto;
    border: 0.06em solid #030;
    background-image: url(http://coothead.co.uk/images/leaves-bright.jpg);
    background-size: 100% auto; 
    box-shadow: 0.2em 0.2em 0.2em #999; 
 }

h1 span {
    display: inline-block;
    padding: 4%;
    margin: 4%;
    background: rgba(231,200,75,0.75);
    font-size: 0.6em;
    text-align: center;
    text-transform: uppercase;
 }

@media screen and (max-width:51em) {
h1 {
    width: 80vw;
    height: 49.383vw;
  }
 }

@media screen and (max-width:21em) {
h1 {
    width: 90vw;
    height: 55.555vw;
  }
 }
</style>

</head>
<body> 

<h1>
 <span>Lorem ipsum dolor sit amet.</span>
</h1>

</body>
</html>

coothead

3

Here is a quick and dirty DEMO using the image @coothead supplied/

<?php 
  $title = 'SVG Logo';
  $jb    = 'by: John_Betong';
  $sp    = 'https://www.sitepoint.com/community/t/'
         . 'using-svg-format-for-responsive-website-banner/232555';
  $svg   = '<svg width="100%" height="auto" viewBox="0 0 648 400">'
         . ' <image'
         .'     xlink:href="http://coothead.co.uk/images/leaves-bright.jpg"'
         .'     x="0" y="0"' 
         .'     width="648px" height="400px"'
         .'  />'
         .'</svg>'
         ;

?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title> <?= $title ?> </title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {background: #f0f0f0;}
#logo{width:100%; height:auto;}
#logo div {width:200px; height:auto;}
.bg1 {background-color:cyan;} .bgs {background-color: snow;}
.clb {clear:both;}
.fll {float:left;} .flr {float:right;}
.mga {margin:auto;}
.ooo {border:0; margin:0; padding:0;}
.p42 {padding:0.42em;}
.w88 {width:88%;}
.tac {text-align:center;}
</style>
</head>
<body> 

  <div id="logo" class="fll bg1 tac">
    <a class="flr" href="<?= $sp ?>"> SitePoint Forum </a>
    <div class="fll">
      <?= $svg ?>
    </div>    
    <h1> <?= $title ?> </h1>
    <h5> <?= $jb ?> </h5>
  </div>

  <p class="w88 mga p42 bgs"> <?php highlight_file(__FILE__) ?> </p>
</body>
</html>
4

Thank you so much for the script! I will use this. just wanted to check if there are any issue with using svg format for a banner? is it the file size?

5

Size matters and the SVG contents can be loaded in numerous ways.

Experiment and notice the differences with Pingdom Tools

6

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