Adding SVG graphics to AMP pages

The Scalable Vector Graphics (SVG) format is an efficient, vector-based graphics format that is supported in AMP. Since it's vector-based, this means that it scales to any resolution, which makes it a perfect fit for responsive web design where graphics must often be scaled to fit different screen sizes:

This time, we'll update our pull-quote example by using an SVG image for the quotation mark instead of the CSS pseudo-selector solution we saw before. We can add SVG in line in AMP-HTML pages.

Creating SVG graphics is beyond the scope of this book, but many applications, such as Potrace (potrace.sourceforge.net) and Adobe Illustrator, support SVG. The following SVG markup was created in Illustrator by simply exporting a text quotation mark as SVG. We'll add this to our page:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 113.7 99.4" enable-background="new 0 0 113.7 99.4" xml:space="preserve">
  <g>
    <path d="M52.6, 69.3c0, 4.3-1.7, 8-5.2, 11.3c-3.5, 3.2-7.5, 4.8-12.3, 4.8c-7.4, 0-13.1-2.4-17-7.3c-4-4.9-5.9-11.7-5.9-20.3c0-8, 3.4-16.2, 10.2-24.3c6.8-8.2, 15-14.4, 24.7-18.6l4.4, 7.1c-7.6, 3.7-13.6, 8-17.9, 12.9c-4.3, 4.9-6.8, 10.8-7.5, 17.8h5.7c4.2, 0, 7.6,0.5, 10.2, 1.4c2.6, 0.9, 4.7, 2.2, 6.4, 3.9c1.5, 1.6, 2.6, 3.4, 3.3, 5.3C52.3, 65.3, 52.6, 67.3, 52.6, 69.3z M102.2, 69.3c0, 4.3-1.7,8-5.2, 11.3c-3.5,3.2-7.5, 4.8-12.3,4.8c-7.4, 0-13.1-2.4-17-7.3c-4-4.9-5.9-11.7-5.9-20.3c0-8, 3.4-16.2, 10.2-24.3c6.8-8.2, 15-14.4, 24.7-18.6l4.4, 7.1c-7.6, 3.7-13.6, 8-17.9, 12.9c-4.3, 4.9-6.8, 10.8-7.5, 17.8h5.7c4.2, 0, 7.6, 0.5, 10.2, 1.4c2.6, 0.9, 4.7, 2.2, 6.4, 3.9c1.5, 1.6, 2.6, 3.4, 3.3, 5.3C101.9, 65.3, 102.2, 67.3,102.2, 69.3z"/>
  </g>
</svg>

This time, to style it, we'll make use of AMP's flex-item layout that we saw earlier. We'll put the SVG image and the amp-fit-text component into a flex parent container, and we'll set the layout of the amp-fit-text component to be flex-item:

<div class="pull-parent">
  <svg class="pull-quote">
  ... 
  </svg>

  <amp-fit-text class="pull-quote-text" 
                width="400" 
                height="75"
                layout="flex-item" 
                max-font-size="42">
    The whale is a mammiferous animal without hind feet
  </amp-fit-text>
</div>

Now add a small bit of CSS to the <style> tag in the document head to set the parent as a flex element:

.pull-parent {
  display: flex;
}

Now we have a nice, professional-looking pull-quote that we can use in our article pages:

Note that amp-fit-text will try to size the text within the specified parameters, but it will truncate the text where this is not possible.

For example, the following code would produce truncated text because a relatively large min-font-size has been specified. When this happens, ellipses are automatically added in WebKit and Blink based browsers:

<amp-fit-text width="400" 
              height="75" 
              min-font-size="30"
              max-font-size="42">
    The whale is a mammiferous animal without hind feet
</amp-fit-text>

We have used amp-fit-text for a simple pull-quote here, but it could also be used for things such as image captions, article teasers, and so on. In fact, a further improvement to the related content thumbnail listing example we saw earlier would be to use amp-fit-text to ensure that the caption text was not too long. This is left as an exercise for the reader.