Using SVG Data URI to implement HTML special character background

This article explores in depth how to use CSS and SVG Data URI technology to efficiently and flexibly use special characters as the background pattern of HTML pages. This method directly embeds SVG images into the background-image attribute of CSS, overcoming the limitations of traditional pseudo elements, achieving precise control of character color, size, and repetition, and providing rich visual customization capabilities for web design.

In web design, sometimes we need to add a background composed of repeated special characters to the page to achieve a unique visual effect. Beginners may try to use the CSS pseudo-element ::before combined with the content attribute to insert special characters, for example:

 html::before {
  content: '\2591'; /* Try to insert characters using pseudo elements*/
  /* ... but this cannot be used as a background pattern to be filled repeatedly */
}

However, there are limitations to this approach. Although the ::before pseudo-element can insert content, it usually exists as an independent element of the page, located in the content flow, and it is difficult to achieve a tiling effect as the background of the entire page. It does not naturally fill the entire viewport repeatedly like a background-image does, and it is difficult to be covered by the actual content of the page.

Create character background using SVG Data URI

To implement special characters as repeatable background patterns, the most elegant and pure CSS solution is to utilize SVG Data URIs. This approach allows us to define a small SVG image containing the special characters we want directly in CSS and then apply it as a background-image on the HTML element.

Here is an example of CSS code to achieve this effect:

 html {
  /* Use SVG Data URI as background image*/
  background-image: url("data:image/svg xml;utf8,<svg xmlns="'http://www.w3.org/2000/svg'" version="'1.1'" height="'25px'" width="'20px'"><text x="'0'" y="'15'" fill="'red'" font-size="'20'">░</text></svg>");
  /* By default, the background image will be repeatedly tiled */
  /* background-repeat: repeat; */ 
  /* background-size: auto; */
}

With a simple HTML structure, you can observe the effect:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Special character background example</title>
    <style>
        html {
            height: 100%; /* Ensure that the html element fills the viewport so that the background can be fully displayed*/
            margin: 0;
            padding: 0;
            background-image: url("data:image/svg xml;utf8,<svg xmlns=&#39;http://www.w3.org/2000/svg&#39; version=&#39;1.1&#39; height=&#39;25px&#39; width=&#39;20px&#39;><text x=&#39;0&#39; y=&#39;15&#39; fill=&#39;red&#39; font-size=&#39;20&#39;>░");
            background-color: #f0f0f0; /* When SVG is transparent, you can set a background color*/
        }
        body {
            margin: 0;
            padding: 20px;
            font-family: sans-serif;
            color: #333;
        }
        p {
            margin-bottom: 1em;
            line-height: 1.6;
        }
    </style>


    <p>This is a sample website content. </p>
    <p>The background consists of repeated special characters "░". </p>
    <p>The content is clearly visible above the background. </p>
    <p>By adjusting SVG parameters, you can change the style and arrangement of characters. </p>

Code analysis and precautions

1. data:image/svg xml;utf8,... : This is a Data URI scheme for embedding small files directly into HTML or CSS. image/svg xml specifies the data type is an SVG image, and utf8 specifies the encoding method.
2. :
   • xmlns: Declare the SVG namespace, this is standard practice.
   • version: SVG version.
   • height and width: define the dimensions of a single SVG image, which determines the size of each character "tile" in the background. You can adjust them as needed to control the spacing between characters.
3. ░ :
   • : Text element in SVG, used to display characters.
   • x and y: define the starting position of the text. The y value is usually the baseline position, so y='15' means the text baseline is at 15px of the SVG container.
   • fill: Set the color of characters. Set to red here. You can use any CSS color value.
   • font-size: Set the size of characters.
   • ░: This is the special character to be displayed (Unicode \2591). You can replace it with any other Unicode character.
4. Background repetition and positioning :
   • When background-image applies an image that is smaller than its container, the default behavior is background-repeat: repeat;, which means the image will be tiled horizontally and vertically.
   • You can control the tiling method through the background-repeat attribute (such as no-repeat, repeat-x, repeat-y).
   • background-position can adjust the starting position of the tile.
   • background-size resizes each SVG image, which affects the actual display size and density of characters. For example, background-size: 10px 10px; will make each SVG "tile" smaller.

Summarize

By leveraging the SVG Data URI, we can cleverly apply special characters to web pages as pure CSS background images. This method not only solves the limitations of traditional pseudo elements in background implementation, but also provides extremely high flexibility, allowing developers to precisely control the style, size, color of characters, and the tiling of the background. This opens up new ways to achieve unique, lightweight visual background effects without relying on external image files or JavaScript. With good compatibility in modern browsers, SVG Data URIs are a professional and efficient choice for implementing such backgrounds.

The above is the detailed content of Using SVG Data URI to implement HTML special character background. For more information, please follow other related articles on the PHP Chinese website!