Embedding SVG images with selectable text in HTML: Implementation methods and best practices

This tutorial explores how to embed SVG images in HTML while ensuring that the text inside the SVG is selectable and searchable. Targeting ` `The problem of tags not being able to preserve text interactivity, the article details two main solutions: inlining SVG code directly into the HTML document, and using `

In web development, SVG (Scalable Vector Graphics), as an XML-based vector graphics format, is popular for its scalability, small file size, and good accessibility. However, when we need to embed SVG images in HTML and hope that the text inside the SVG can be selected, copied, or searched by the user through "Ctrl F" like ordinary HTML text, the traditional way of using the tag often cannot meet the needs. The tag treats SVG as a bitmap image, stripping away the semantics and interactivity of its inner text.

To solve this problem, we can use the following two methods to embed SVG, thereby preserving its text selectability and searchability.

Method 1: Inline SVG (Inline SVG)

Inline SVG is to embed the SVG XML code directly into the

Implementation method:

Place complete SVG code blocks directly in HTML documents.

Sample code:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline SVG example</title>
    <style>
        body { font-family: sans-serif; }
        svg { border: 1px solid #ccc; margin-top: 20px; }
    </style>


    <h1>Inline SVG text optional presentation</h1>
    <p>The text in the following SVG images can be directly selected and searched:</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>Try selecting text in the SVG or search for "shame" using Ctrl F. </p>

advantage:

• Full accessibility: SVG text becomes part of the DOM and can be selected, copied, searched, and accessed by assistive technologies such as screen readers.
• CSS and JavaScript control: Elements inside SVG can be styled directly via CSS, or manipulated and animated using JavaScript for a high degree of interactivity.
• Reduce HTTP requests: SVG content is included directly in HTML, no additional file requests are required.

shortcoming:

• HTML file increase: For complex SVG, the HTML file will become lengthy, affecting readability.
• Caching issues: SVG content is cached together with HTML, and SVG files cannot be cached independently.
• Content Security Policy (CSP): If your SVG contains scripts, it may be subject to CSP restrictions.

Method 2: Use the

The

Implementation method:

Use the data attribute of the

Sample code:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embed SVG example using object tag</title>
    <style>
        body { font-family: sans-serif; }
        object { border: 1px solid #ccc; margin-top: 20px; }
    </style>


    <h1>Optional presentation using <object> tag to embed SVG text</object>
</h1>
    <p>Text in the following SVG images can be loaded via the <object> tag and remains selectable and searchable:</object></p>

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

    <p>Try selecting text in the SVG or search for "war" using Ctrl F. </p>

advantage:

• Clear HTML structure: Separate SVG content from HTML and keep HTML code clean.
• Independent caching: SVG files can be cached independently of HTML files to improve loading efficiency.
• Content fallback: The
• Cross-domain control: Embedded SVG acts as a standalone document with internal scripts and styles restricted by its own domain, helping with secure isolation.

shortcoming:

• DOM access restrictions: Directly accessing the SVG DOM inside
• Additional HTTP requests: Each load requires an additional HTTP request to get the SVG file.

Precautions and selection suggestions

• Browser compatibility: Modern browsers have good support for inline SVG and SVG embedding of
• Performance considerations: For small, simple SVGs, inline SVG may be more efficient because it avoids additional HTTP requests. For large and complex SVGs, or SVGs that need to be reused in multiple places, it is usually a better choice to use the
• Interactivity requirements: If you need to frequently operate elements inside SVG through JavaScript, or the style of SVG needs to be closely integrated with the style of HTML, inline SVG provides the greatest flexibility.
• SEO: Both methods allow search engines to crawl the text content in SVG, which helps SEO.
• Accessibility: Ensure that text in SVG has correct semantics (such as using

Summarize

The tag is not ideal when you need to embed an SVG image in HTML and keep its text selectable and searchable. Developers should weigh the pros and cons of inline SVG and

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