Tips for extracting an SVG path from HTML structure

Question

Tips for extracting an SVG path from HTML structure

This example I'm referencing is by Chris Coyer

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">

<defs>
<g id="icon-image">
<path class="path1" d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z"></path>
</g>
</defs>
</svg>

<h1>
<svg viewBox="0 0 32 32">
    <use xlink:href="#icon-phone"></use>
 </svg>
Call me

However, I want to store the path definitions separately from the HTML so they can be used throughout the app.

Is there a way to achieve this without having to manually inject the svg using JavaScript?

I have explored various methods of embedding and linking SVG paths and files, but need to ensure that I can style them dynamically with currentColor. Using external SVG files in an img tag doesn't allow for this, as explained in detail in this blog post.

The closest solution I've found is the example above. However, I still prefer not to embed the path directly in the HTML. Is there a way to place it in an external file for reusability?

html css svg

Answer 1

Answer №1

One alternative is to transform SVG into a font format

If you search online for "convert SVG to font," you'll find numerous websites and tools that can help with this conversion, such as:

Additionally, "HTML entities" offer various reusable icons, among other resources.

https://dev.w3.org/html5/html-author/charref

Answer 2

One alternative is to transform SVG into a font format

If you search online for "convert SVG to font," you'll find numerous websites and tools that can help with this conversion, such as:

Additionally, "HTML entities" offer various reusable icons, among other resources.

https://dev.w3.org/html5/html-author/charref

Answer 3

Answer №2

There is just one option left to consider. You can avoid manually embedding the svg, bypass injecting it with javascript, and steer clear of using it in an img tag if you prefer to tweak the properties with css. Your best bet now would be to utilize your server-side language to inject it.

For instance, if you are working with php, you could easily output the content of your svg file wherever needed:

<?php echo file_get_contents(file_path); ?>

Answer 4

There is just one option left to consider. You can avoid manually embedding the svg, bypass injecting it with javascript, and steer clear of using it in an img tag if you prefer to tweak the properties with css. Your best bet now would be to utilize your server-side language to inject it.

For instance, if you are working with php, you could easily output the content of your svg file wherever needed:

<?php echo file_get_contents(file_path); ?>

Answer 5

Answer №3

Exploring another innovative approach, I stumbled upon SVG Sprites, which are thoroughly explained by Chris Coyier

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
  .icon {
width: 125px;
height: 125px;
background: #eee;
      fill: currentColor;
}

body {
  padding: 20px;
}
</style>
</head>
<body>
<div style="color: red">
    <svg class="icon"><use xlink:href="menu.svg#beaker"/></svg>
</div>
<div style="color: brown">
    <svg class="icon"><use xlink:href="menu.svg#fish" /></svg>
</div>
</body>
</html>

This can be implemented with a separate file named menu.svg:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>

<symbol id="fish" viewBox="0 26 100 48">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
C88,48.9,86.9,50,85.5,50z" />
</symbol>

Answer 6

Exploring another innovative approach, I stumbled upon SVG Sprites, which are thoroughly explained by Chris Coyier

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
  .icon {
width: 125px;
height: 125px;
background: #eee;
      fill: currentColor;
}

body {
  padding: 20px;
}
</style>
</head>
<body>
<div style="color: red">
    <svg class="icon"><use xlink:href="menu.svg#beaker"/></svg>
</div>
<div style="color: brown">
    <svg class="icon"><use xlink:href="menu.svg#fish" /></svg>
</div>
</body>
</html>

This can be implemented with a separate file named menu.svg:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>

<symbol id="fish" viewBox="0 26 100 48">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
C88,48.9,86.9,50,85.5,50z" />
</symbol>

Tips for extracting an SVG path from HTML structure

Answer №1

Answer №2

Answer №3

Similar questions

Creating column gaps that remain consistent when resizing a webpage is essential for maintaining a clean and organized layout

How to ensure that HTML5 range input retains its value after multiple page reloads

Div's background image displays flawlessly on Code Pen desktop, yet fails to appear when viewed on mobile devices

Obtaining an Element using Selenium with a specific label

Issue with Child Element Width in CSS3 Not Adhering to Parent Container's Width

The div is obscured by the background image

What is the best way to design a personalized scrollbar for a stationary sidebar within a flexible Twitter Bootstrap design?

Utilize MaterialUI Grid to define custom styles for the ::after pseudo-element

To reveal the secret map location, just tap on the button - but remember, this only applies to

Padding for the doughnut chart in Chart.js canvas

Header width does not fully occupy the available space

suggesting options comparable to addthis or sharethis

Trouble with targeting a specific css class

Tips for successfully passing ExpressJS locals variable to an EJS template and utilizing it as a parameter when invoking a JavaScript function during the onload HTML event

Attribution of image in footer

Image input not working in Internet Explorer

Tips for resizing the MUI-card on a smaller screen

Adjusting the width of titles in a CSS menu upon hover

Steps for achieving uniform positioning of a div element that dynamically appears within a table with two rows and four table data cells

Scroll the table automatically when the currently selected row is the second-to-last row