Changing color of entire SVG image: a step-by-step guide

Check out this SVG image I found: https://jsfiddle.net/hey0qvgk/3/

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" width="90" height="90" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 613.2 416" style="enable-background:new 0 0 613.2 416;" xml:space="preserve">
<style type="text/css">
    .video-svg{fill:#00648F;}
</style>
<g>
    <path id="video-svg" class="video-svg" d="M346.7,415.8H69c-38,0-69-30.9-69-69V69.1c0-38,30.9-68.9,69-68.9h277.8c38,0,69,30.9,69,68.9v277.7
        C415.7,384.9,384.8,415.8,346.7,415.8z M69,33.9c-19.4,0-35.2,15.8-35.2,35.2v277.7c0,19.4,15.8,35.2,35.2,35.2h277.8
        c19.4,0,35.2-15.8,35.2-35.2V69.1c0-19.4-15.8-35.2-35.2-35.2H69z"/>
    <path id="video-svg" class="video-svg" d="M596.3,354.1c-3.3,0-6.6-1-9.5-2.9l-115-78.1c-4.6-3.1-7.4-8.4-7.4-13.9V156.8c0-5.6,2.8-10.8,7.4-13.9
        l115-78.1c5.2-3.5,11.9-3.8,17.4-1c5.5,2.9,9,8.7,9,14.9v258.6c0,6.2-3.4,12-9,14.9C601.7,353.5,599,354.1,596.3,354.1z
         M498.2,250.2l81.3,55.2V110.5l-81.3,55.2V250.2z"/>
</g>
</svg>

I noticed that only the path of the image is colored while the interior remains empty. I'm still learning about svg and would like to know how to fill the whole image with a specific color. Can you help me achieve this?

javascripthtmlcsssvg

Answer №1

Your svg path has been transformed into shapes.

Check out this link to see:

  • The first svg, similar to yours, that has been edited in Illustrator to adjust the paths.
  • The second is an svg created using strokes instead of converting them to shapes. This allows for control over both the stroke and the fill via css (in my example).

Answer №2

Your icon is composed of two distinct paths. One path depicts the body of the camera, while the other represents the "lens".

Within each of these paths, there are two subpaths. One outlines the outer edge of the shape, and the other defines the inside (the transparent hole within).

For instance, the first path corresponds to the camera's "body". Here is its path definition:

# the "outer edge"
M346.7,415.8H69c-38,0-69-30.9-69-69V69.1c0-38,30.9-68.9,69-68.9h277.8
c38,0,69,30.9,69,68.9v277.7C415.7,384.9,384.8,415.8,346.7,415.8z

# the "hole"
M69,33.9c-19.4,0-35.2,15.8-35.2,35.2v277.7c0,19.4,15.8,35.2,35.2,35.2
h277.8c19.4,0,35.2-15.8,35.2-35.2V69.1c0-19.4-15.8-35.2-35.2-35.2H69z

Each subpath begins with an 'M' (move) command and ends with a 'z' (close path) command.

In this particular icon, the second subpath within each <path> element represents the hole. Removing these two hole subpaths results in:

<svg version="1.1" width="90" height="90" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 613.2 416" style="enable-background:new 0 0 613.2 416;" xml:space="preserve">
<style type="text/css">
.video-svg{fill:#00648F;}
</style>
<g>
<path id="video-svg" class="video-svg" d="M346.7,415.8H69c-38,0-69-30.9-69-69V69.1c0-38,30.9-68.9,69-68.9h277.8c38,0,69,30.9,69,68.9v277.7
C415.7,384.9,384.8,415.8,346.7,415.8z"/>
<path id="video-svg" class="video-svg" d="M596.3,354.1c-3.3,0-6.6-1-9.5-2.9l-115-78.1c-4.6-3.1-7.4-8.4-7.4-13.9V156.8c0-5.6,2.8-10.8,7.4-13.9
l115-78.1c5.2-3.5,11.9-3.8,17.4-1c5.5,2.9,9,8.7,9,14.9v258.6c0,6.2-3.4,12-9,14.9C601.7,353.5,599,354.1,596.3,354.1z"/>
</g>
</svg>

You have the option to make graphical edits using Illustrator or manually modify the file as demonstrated above. Keep in mind that not all files may be as easily altered manually.

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

Creating a custom video to use as the favicon for my website

Imagine this: With the help of this plugin, you can have a video playing as your site's favicon using the following code snippet: var favicon=new Favico(); var video=document.getElementById('videoId'); favicon.video(video); //stop favicon.v ...

javascriptjquerycsshtml

Execute Function after Gridview Sorting

While working on a gridview within an update panel, I encountered a scenario where the gridview successfully resorts itself upon clicking on the column header. However, post-sorting, I wish to execute a JavaScript function named MyScript. Any suggestions ...

javascriptasp.netajax

The offlinefirst.sock encountered an EPERM error

Encountering an error when attempting to run https://github.com/jakearchibald/wittr on Windows bash. Assistance in either resolving or troubleshooting this issue would be greatly appreciated: Development server listening. (PID:469) Config server liste ...

javascriptexpress

The Authorization Header is added just once during an AJAX CORS request

I am making calls to my RESTful API from JavaScript in a CORS scenario. To send my POST authenticated request, I am utilizing JQuery. Below is an example: function postCall(requestSettings, includeAccessToken) { requestSettings.type = 'POST& ...

javascriptjqueryajaxcors

where is the yarn global registry located?

After updating yarn to point to my custom registry and verifying the changes, here is what I found: $yarn config list -g yarn config v1.22.10 info yarn config { 'version-tag-prefix': 'v', 'version-git-tag': true, ' ...

javascriptnpmyarnpkg

Is it considered good or bad practice to use plain JavaScript objects in an AngularJS application?

Imagine needing a custom object that doesn't rely on AngularJS (such as a specific collection with unique functionalities). You could create it independently of AngularJS and simply use it in services/controllers. Alternatively, you could design it a ...

javascriptangularjs

How to resolve the error of "Objects are not valid as a React child" in NextJs when encountering an object with keys {children}

I am currently working on a nextjs application and I have encountered an issue with the getStaticPaths function. Within the pages folder, there is a file named [slug].tsx which contains the following code: import { Image } from "react-datocms"; i ...

javascriptreactjsnext.jsgraphqldatocms

What is the best way to create a grid layout that is responsive using HTML and CSS

I have been searching all over the internet and have not been able to find a grid layout like this. The "grid-template-columns" property is not achieving what I need, as I cannot make one box larger than the others. I am looking to create 4 equal boxes an ...

htmlcsscss-grid

Passing an array from JavaScript to PHP and then storing it as a .json file

Query I am trying to pass an array to PHP and save it in a data.json file. However, the data.json file is being created but showing Null as output. I have spent about 2 hours on this code, checked numerous solutions on SO, but nothing seems to work. As I ...

javascriptphparraysjsonajax

Stylish mobile navigation styles with CSS

Hey there, I appreciate any help you can provide. I'm having trouble figuring out the right CSS code to modify the colors of my Mobile Menu only... I'd like to change the placeholder text as well as the text and background of the drop-down menu ...

cssmenu

Resizing images in different web browsers: Chrome, IE, and Safari

I'm currently in the process of building a website that utilizes the jquery tabs api. Each tab on the site contains an image that I would like to resize dynamically as the browser window size changes. Here is an example of one of the tabs: <li st ...

jquerycssimageinternet-explorergoogle-chrome

Express Vue Production Problem

I've been attempting to implement SSR in my Vue app, and to achieve this I've incorporated the vue-plugin-ssr extension. To run it with express, I created a new file named server.mjs containing the following code: import express from "expres ...

javascriptvue.jsexpressserver-side-rendering

Aligning two identical components within the same container when triggered by a single click

Currently, I am exploring Angular 2 and Typescript and have been developing a pager component for a table. The pager functions correctly, but I have encountered an issue with having two pagers - one above the table and one below it. When the next button on ...

htmlangulartypescriptcomponents

Move the search bar to the left side of the screen instead of the

Is there a way for the search bar in my navbar's dropup menu to transition from right to left? Currently, the dropup menu is positioned on the far right of the screen as desired, but when I click on the search button, the search bar extends off the sc ...

htmlcssbootstrap-5

A guide on breaking down the ID passed from the backend into three segments using React JS

I pulled the data from the backend in this manner. https://i.stack.imgur.com/vMzRL.png However, I now require splitting this ID into three separate parts as shown here. https://i.stack.imgur.com/iy7ED.png Is there a way to achieve this using react? Bel ...

javascriptreactjssplitmaterial-ui

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

I've always wondered why setting a certain object's key as its own value in a loop results in undefined. Take this code block, for example: var text = 'this is my example text', obj = {}, words = text.split(' '); for (i = ...

javascript

Enhance the form values using HTML and Javascript before submitting them via POST

Greetings to all! Apologies if my question seems elementary, as I am relatively new to using Javascript/HTML... I am encountering an issue with PayPal integration. In the past, I have successfully implemented it with a single fixed price, but now I have ...

javascripthtmlformsdynamicpaypal

What is preventing me from being able to effectively transmit the array using the POST method in Express?

As a newcomer trying to learn Express, I believe I am on the right path, but I am currently facing some challenges with the POST method. The issue I'm encountering is as follows: Whenever I send a POST request to an HTTP file, I receive an empty ob ...

javascriptnode.jsexpressposthttp-post

Optimizing NodeJS for scheduling and sending bulk text messages based on MongoDB data

I am currently developing an application that relies on MongoDB database entries to send text messages through AWS. The information stored in the database includes the message content, phone number, and scheduled time for sending the message. As of now, ...

javascriptnode.jsmongodbexpress

Laravel 4.2 email template not applying CSS inline style for text color

Working on setting up email functionality in Laravel 4.2 and I've got an email template ready to go. The data for the emails is stored in an array, but I'm running into an issue where if I pass a parameter like $variable, the styles are only bein ...

phphtmlcssemaillaravel-4