Home Blog Projects About
Русский

Open SVG in Chrome on Mac with Vifm

7 July 2024. Comments .
  1. To open file.svg in a new window regardless of whether the browser is already running or not:
1
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --new-window --disable-session-crashed-bubble --disable-infobars --app=file:/path/to/file.svg
  1. To apply your own CSS styles to the file, you can do the following. We will actually open template.html, and use sed to replace the placeholder in the file with the path to the SVG file. This style adds a border around SVG image.
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YOUR_SVG_FILE.svg</title>
  <style>
    .svg-container {
      display: inline-block;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="svg-container">
    <object id="svg-object" type="image/svg+xml" data="YOUR_SVG_FILE.svg"></object>
  </div>
</body>
</html>
  1. Now you can launch Chrome (replace /path/to/file.svg with the actual path):
1
cp /path/to/template.html /tmp/temp_svg.html && sed -i '' -e 's#YOUR_SVG_FILE.svg#/path/to/file.svg#g' /tmp/temp_svg.html && "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --new-window --disable-session-crashed-bubble --disable-infobars --app=file:///tmp/temp_svg.htm
  1. All this was done so that the SVG file could be quickly opened in the vifm file manager (replace /path/to/file.svg with the actual path):
1
map \c :!cp /path/to/template.html /tmp/temp_svg.html && sed -i '' -e 's#YOUR_SVG_FILE.svg#%d/%c#g' /tmp/temp_svg.html && "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --new-window --disable-session-crashed-bubble --disable-infobars --app=file:///tmp/temp_svg.html 2>/dev/null &<cr>

© Sergey Lisakov, 2024. Powered by Hexo.