Bits & Bytes

Archive for the ‘General’ Category

How to Fix Problems with Displaying SVG Images within an HTML Image Element

Suppose that you have an image element inside of an HTML file, like this one:

<img width="30px" height="40px" src= "MyImage.svg"  />

and your SVG file, “MyImage.svg”, looks like this:

<svg width="30" height="40" xmlns="">
  <image href="Christ.png" x="10" y="20" width="20" height="20"></image>

In this case, the image inside the svg, “Christ.png”, will not display because the image element will not allow the reference to the external file “Christ.png”.

However, this can be fixed in a few different ways:

  1. Change the image element to an embed element:

    <embed width=”20px” height=”20px” src= “MyImage.svg” />

  2. Eliminate the image element and include the svg element in the HTML directly.
  3. Convert the image into a 64 bit data URI

If you have never seen a 64 bit data URI, they look something like this:


Warning: 64 bit data URI encoded images can be quite long, even for a moderately-sized image. The text above was generate for the small 20 pixel by 20 pixel image shown here:

So, instead of our original svg element, we could use this one with a 64 bit encoded data URI:

<svg width="30" height="40" xmlns="">
  <image x="10" y="20" width="20" height="20" href="data:image/png;base64

Fixing “The battery is charged to a high capacity”

If you have your laptop plugged in for a while, it will fully charge the battery. If the battery remains fully charged, you will often see this dialog warning you about the dangers to the battery if it remains fully charged or nearly so:

To fix this issue and stop battery from being degraded, move the mouse pointer to the lower-right corner of the screen and left-click the arrow next the battery. Then left-click the Energy Manager icon shown here:

This will open the Energy Manager dialog shown here:

Left-click the circle to the upper-right of the gauge to expand the Energy Manager as shown:

Left-click the Settings tab in the expansion to see the settings:

Then left-click the button next to Conservation Mode so that it turns red as shown:

This will keep the battery charge between 20% and 60% and will prevent the battery from being over-charged.

Fixing Disappearing Icon Overlays

Icon overlays are important for visually keeping track of the state of files in a repository. At a glance, you can tell if the file checked in, modified, locked, etc. Below is a screen of some folders that are under version control in TortoiseSVN. The little green check indicates that these folders and the files inside are all checked in and have not been modified since the check in.

The problem is that most versions of Windows have a limited number of available icon overlays that they can use at one time, usually 15 or less. If you use a version control system, like TortoiseSVN, it may register many icon overlays. TortoiseSVN, for example, registers 9 icon overlays. OneDrive uses 5 icon overlays and Google uses 3.

Once you exceed the limited number of icon overlays in the registry, the additional overlays are not displayed. In the case of TortoiseSVN, none of them were displayed when some of them could not be displayed.



The solution is to prioritize the icons that you want to see and move them up in the list using the Registry Editor. Begin by opening a Command Prompt and entering “regedit” to open the Registry Editor as shown below:

Once you enter “regedit” and hit return, the Registry Editor should open and look similar to what is shown below.

As the status bar at the bottom of the window above shows, you need to navigate to the folder Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\ShellIconOverlayIdentifiers. Now, you should see the list of the names for your icon overlays displayed in the subfolder, and you probably have move than 15 or so of them.

The names of these folders is not important, except to prioritize which ones get used. So, if you want to move some of them up the list, you can add spaces to the front of the folder name, as shown above for the One Drive icon overlays (Microsoft adds one space automatically). Otherwise, you can remove any spaces from the front of the name, as I did with the Google Drive icon overlays (In an effort to beat Microsoft, Google prepends two spaces to its names.). You can add any other characters that you would like to the names of the folders to organize them and select View->Refresh to see your changes. As I said, the name does not matter.

Alternatively, you can also delete some of these folders, but you should perform an Export first, just in case you want to be able to Import them back at a later time. Once you are done, you can close the Command Prompt and Registry Editor windows and restart your machine. The icon overlays should show up after you restart.