Embedding SVG images with selectable text in HTML: two practical methods

This tutorial is designed to guide developers on how to embed SVG images in HTML documents while ensuring that their internal text can be selected and searched by users. The article will detail two core methods: using inline SVG code directly and passing `

SVG (Scalable Vector Graphics) plays an important role in modern web design due to its vector nature and the advantage of staying legible at different resolutions. However, when SVG is embedded via the traditional tag, the SVG file is often viewed by browsers as a flat image, and the text content within it loses its selectable and searchable characteristics, which is a limitation in terms of user experience and content accessibility. In order to solve this problem, this article will introduce two effective methods to ensure that text in SVG can interact like ordinary HTML text.

Method 1: Inline SVG (Inline SVG)

Inline SVG is a way of embedding SVG code directly into an HTML document. With this approach, the SVG's XML structure becomes part of the HTML DOM. This means that all elements inside the SVG, including text defined by or tags, will exist as recognized DOM nodes. Therefore, this text can be selected by the browser, copied, searched via Ctrl F, and even manipulated via CSS and JavaScript.

Implementation steps:

1. Open the SVG file and copy its
2. Paste the copied code directly into the HTML document where you want the SVG to appear.

Sample code:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline SVG example</title>


    <h1>Inline SVG text optional presentation</h1>
    <p>The text in the following SVG images can be selected and copied with the mouse:</p>

    <svg width="453px" height="136px" viewbox="0 0 1000 300">
        <defs>
            <path id="MyPath" d="M 100 125 
                         C 150 125 250 175 300 175
                         C 350 175 450 125 500 125
                         C 550 125 650 175 700 175
                         C 750 175 850 125 900 125"></path>
        </defs>
        <use xlink:href="#MyPath" fill="none" stroke="red"></use>
        <text font-family="Verdana" font-size="60" fill="blue" letter-spacing="2">
            <textpath xlink:href="#MyPath">
                Choose shame or get war
            </textpath>
        </text>
        <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2"></rect>
    </svg>

    <p>You can now try to select or search for the text "Choose shame or get war" in the SVG. </p>

advantage:

• Text is fully selectable and searchable.
• Various parts of the SVG can be controlled directly via CSS and JavaScript.
• Reduce HTTP requests and increase loading speed (for small SVGs).

shortcoming:

• Increases the size of HTML files, which may result in verbose HTML code for complex SVGs.
• Cache management is not as convenient as external files.

Method 2: Use the

When you want to keep the HTML file clean, or the SVG file is large and needs to be reused in multiple pages, you can use the

Implementation steps:

1. Make sure your SVG files exist on the server as separate files.
2. Use the

Sample code:

Let's say you have an SVG file called toap04.svg with the same content as the

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object tag embedding SVG example</title>


    <h1>Optional demonstration of embedded SVG text in Object tag</h1>
    <p>The following text in SVG images embedded via the <code><object></object></code> tag can also be selected and searched:</p>

    <object data="https://www.w3.org/TR/SVG11/images/text/toap04.svg" width="453" height="136"></object>

    <p>Please try to select or search the text content in the SVG. </p>

advantage:

• Keep your HTML code simple.
• SVG files can be cached independently for easy reuse and management.
• Text is also selectable and searchable.
• Supports more complex interactions, such as communicating with embedded SVG documents via JavaScript.

shortcoming:

• May introduce additional HTTP requests.
• Directly manipulating elements inside an SVG via JavaScript is slightly more complex than inline SVG, typically requiring access to its DOM via the contentDocument property.
• There may be differences in compatibility in some older browsers (although support is good in modern browsers).

Notes and Summary

• Why doesn't the tag work? The tag treats SVG as an image resource, and browsers typically render it into a bitmap or flatten its internal structure so that its text content is no longer an interactive DOM element.
• Which method to choose?
  • For small, one-time use SVGs that require a high degree of customization and direct JavaScript/CSS control, inline SVG is a better choice.
  • For large SVGs that need to be reused, keep the HTML structure clear, or want to take advantage of browser caching, the is a more suitable solution.
• Accessibility: Ensuring that text in SVG is selectable and searchable is critical for screen readers, search engine optimization (SEO), and the general user experience. This makes SVG content more semantic and accessible.

By mastering the above two methods, developers can flexibly embed SVG images in HTML while taking full advantage of the interactivity of SVG text, thereby creating richer and more accessible web content.

The above is the detailed content of Embedding SVG images with selectable text in HTML: two practical methods. For more information, please follow other related articles on the PHP Chinese website!