Animated SVG Conversion (Icon to Scalable Vector Graphics)

I am having difficulty animating my SVG. I converted it from .ICO to .SVG using an online tool, but now I am unable to animate the strokedasharray and strokedashoffset properties. I've tried using fill but that hasn't worked. Below is my SVG code where I'm trying to create an animation similar to the one in the CodePen link provided. Any help would be greatly appreciated as I'm new to development and can't use Illustrator. https://codepen.io/chriscoyier/pen/bGyoz

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="56.000000px" height="56.000000px" viewBox="0 0 256.000000 256.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
...
... (Truncated for brevity)
...
</g>
</svg>
javascripthtmlcsssvg

Answer №1

If you're looking to enhance your svg, consider using this modified version created in Inkscape. Converting bitmap images to svg can lead to pixelation issues, as evident in your current design. Take advantage of Inkscape's capabilities to import the bitmap icon and refine it through manual drawing.

For animation purposes, give this code a try to achieve the desired effect. Make sure to note the single closed path that has been created for this svg.

<svg viewBox="0 0 256 256">
  <path class="path" d="m 15.625507,46.199537 55.767886,-32.030352 55.623047,32.281229 -0.14485,64.311586 0.14485,-64.311586 55.76788,-32.030352 55.62305,32.281229 -0.14485,64.311579 -55.76788,32.03036 -55.62305,-32.28123 55.62305,32.28123 -0.14485,64.31158 -55.76788,32.03035 L 70.958866,207.10393 71.103708,142.79235 126.87159,110.762 71.103708,142.79235 15.480664,110.51112 Z" style="fill:#fff;stroke:#000;stroke-width:13;stroke-linejoin:round;stroke-linecap:round" />
</svg>


.path {
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: dash 5s linear alternate infinite;
    }

    @keyframes dash {
    from {
        stroke-dashoffset: 1500;
    }
    to {
        stroke-dashoffset: 0;
    }
    }
<!DOCTYPE html>
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title>CodePen - Basic Example of SVG Line Drawing, Backward and Forward</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

    </head>
    <body>

    <svg viewBox="0 0 256 256">
    <path class="path" fill="#fff" stroke="#000000" stroke-width="13" d="m 15.625507,46.199537 55.767886,-32.030352 55.623047,32.281229 -0.14485,64.311586 0.14485,-64.311586 55.76788,-32.030352 55.62305,32.281229 -0.14485,64.311579 -55.76788,32.03036 -55.62305,-32.28123 55.62305,32.28123 -0.14485,64.31158 -55.76788,32.03035 L 70.958866,207.10393 71.103708,142.79235 126.87159,110.762 71.103708,142.79235 15.480664,110.51112 Z"/>
    </svg>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    </body>
    </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using an array in jade rendering

I'm currently working on a node.js server using express and I'm facing an issue with passing an array to jade rendering. Here's the code snippet from my node.js file: router.get('/render', function(req, res) { var t; var ...

javascriptnode.jsexpresspug

Value-based JavaScript object prototype

Is there a way to ensure that every new object I create has its own unique dataTransfer property? For instance, when I try something like Object.prototype.dataTransfer = new DataTransfer();, I want a.dataTransfer.prop to remain 1 even if b.dataTransfer.pro ...

javascriptprototypeobjectprototypejs

Exploring the variable scope in Node.js with a focus on separating routes

My routing configurations are stored in an external folder. Find them in the ./routes directory This is how I set up my routes within the server.js file: app.get('/', routes.index); app.post('/validation', register.valid); The reg ...

javascriptnode.jsmongodbvariablesscope

Deciphering the hidden power of anonymous functions within Express.js

Recently, I started learning about express and am grappling with understanding callbacks in RESTful actions. In the following PUT request code snippet, I am puzzled by the specific line that is highlighted below. Why is response.pageInfo.book being assigne ...

javascriptnode.jsexpress

How can you position an image and text side by side without specifying the width using a div?

Having some trouble aligning an image (which is contained in a div) and some text (also in a div) on the same line without setting a width for the text. Here's what I've tried so far. <div id="container"> <div id="image" style="flo ...

cssimagehtmlalignment

Integrate a PHP variable into an HTML/JavaScript statement that was previously transformed from PHP

Incorporated within this PHP variable is a mix of HTML and JavaScript code. My task is to enhance it by adding another PHP variable. Specifically, I have a PHP variable denoted as $user->user_email. How can I seamlessly integrate this variable into th ...

javascriptphphtmlvar

Instructions on displaying the filename as the input for width and height dimensions

Running into an issue with Bootstrap 4 - whenever I try to upload a file with a long name, it ends up overflowing beyond the input field. ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Conceal content in Bootstrap navbar when clicking on #link

I am facing an issue with the navbar-fixed-top element as it is causing content to be hidden from the container. To resolve this common problem, you can add the following CSS code: body { padding-top: 70px; } After applying the above code, the container ...

htmlcssbootstrap-4navbar

The JavaScript code is not executing properly within the HTML document

I am trying to execute a function from my JavaScript file in my HTML page. Here is the code snippet: index.html <!DOCTYPE html> <html><body> <h2>Web1</h2> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jq ...

javascriptjqueryhtml

What is the method for incorporating more outer space into an inline SVG?

I have a situation where I am using an inline SVG with a transparent fill and a dark stroke. The aim is to change the fill color to dark when hovered over. However, increasing the stroke-width to make the stroke more visible causes it to extend beyond the ...

csssvginline-svg

Ensure that columns are neatly arranged horizontally when they do not all fit in one row

I currently have a row with 6 columns, but when they can't fit next to each other on the screen, 2 of them get pushed below, resulting in a messy layout. I could use a media query to solve this issue, however, I am curious if there is a better way to ...

htmlcsscss-gridbootstrap-5

Dynamic Entry: The Art of JQuery Animation

I want to achieve a sequential flying-in effect when my page loads, with each div sliding in one by one. Currently, all the divs fly in simultaneously, but I'd like them to come in sequentially. Here is my code snippet: <script> function ani ...

javascriptjquerycss

Picking out specific SharePoint components using jQuery

I encountered an issue with making my two radio boxes readonly. To resolve this, I attempted to disable the unchecked option. Despite trying to access the elements using jQuery and reviewing the data from the console, the solution did not work as expected. ...

javascriptjqueryhtmlsharepointjquery-selectors

Creating a seamless thread using AngularJS

I am working on a Spring MVC application that utilizes HTML and Angular on the client side. I have a method in my Angular controller that needs to run every 5 seconds. How can I achieve this using Angular? Thank you for your assistance. $scope.inspectio ...

javascriptangularjsspring-mvc

mongoDB utilizes the timestamp in the _id to determine if it has been accessed in the past 24 hours

After months of lurking and finding answers, I am finally posting for the first time. I am excited to contribute back to the community, although I am still new to programming having just started a few months ago. Here's my dilemma: I am running a web ...

javascriptnode.jsmongodbtimestamp

React transmits an incorrect argument through the function

Having a bit of trouble passing a parameter alongside the function in my for loop to create SVG paths. The props are working fine with the correct 'i' value except for selectRegion(i) which ends up getting the final value of 'i' after t ...

javascriptreactjs

How to programmatically close a Liferay dialog box

I am currently dealing with a Liferay dialog box. My goal is to close this dialog box and then redirect the URL to a specific page. This is how I am attempting to achieve it: <aui:column columnWidth="16" > <%if(UserGroupRoleLocalServiceUtil.has ...

javascriptdialogliferay-6

Error when trying to parse JSON due to an invalid character

I am facing a challenge while trying to parse JSON data from an external json file, which is in the form of an Array. Unfortunately, no data is being returned and I encountered an error (F12) stating 'Invalid character'. What could be causing thi ...

javascriptjqueryajaxjson

Issue with Mongoose not triggering callback

This particular function is the one that we are discussing function matches_password(password) { var modified = false; var matched = false; User.count({password : password}, function (err, result) { modified = true; console.log('hey& ...

javascriptnode.jsmongodbasynchronousmongoose

What could be causing an issue with CORS in ExpressJS in one scenario but not in another?

I am currently in the process of setting up a database and connecting it to various routes. Interestingly, I have been successful with one route ('register') but encountering issues with another ('login'). Whenever I attempt to run the ...

javascriptnode.jsreactjsmongodbexpress