用Inkscape制作xfce4窗口管理器xfwm4主题

在阅读本文前，建议先阅读怎样制作xfwm4主题官方教程，了解制作xfwm主题需要哪些文件。
本文简译自此教程，并在其基础上撰写本文，点此下载示例svg源文件

一、用Inkscape 批量制作窗口管理器部件所需图像

1.打开Inkscape建立文件。
点击菜单栏文件>文档属性(或者按快捷键shift+ctrl+D)，在页面选项卡>自定义尺寸中设置单位为px（像素），宽高根据需要设定，然后保存为svg格式文件。

2.建立3层图层。
打开图层窗格（按快捷键shift+ctrl+L），

框架层（frame）：在此层制作整个窗口主题需要的各部位图像画出各个部件目标的图形，根据需要定义颜色，大小等；
背景层（background）：（可选）一般按等于整个画布大小定义；
命名层（name）：（可选）对每个对应部位图像加上名字显示，比如 [left, right, bottom, 1, 2, 3 ,4 5]。

给出的示例中，采用了10像素的窗口边框大小，通过Inkscape的矩形画制。
Bottom Left: [10px * 10px]
Bottom Right: [10px * 10px]
Top Left: [10px * 10px]
Top Right: [10px * 10px]
Bottom: [20px * 10px]
Left: [10px * 20px]
Right: [10px * 20px]
Each [1, 2, 3, 4, 5]: [10px * 10px]

3.输出图像。
文件>导出png图像（按快捷键shift+ctrl+E），
可以在导出图像窗格看到，我们能选择框架（frame）层中每一个选区单独导出，对每一个选区按对应的命名导出为png图片。

导出后可以看到生成的文件

二、完成XFWM4主题制作

除需要png（或xpm）格式图片外（经实践，png会转化为位图显示，如果有圆角的，其边缘细节较差；不支持颜色透明度，但支持颜色为空的纯透明，半透明的会丢失颜色），xfwm主题还需要文本定义文件themerc（此处贴上本人使用的dark主题的themerc文件，示例的配置可以去原文看），

button_offset=3
button_spacing=0
full_width_title=true
title_horizontal_offset=0
title_vertical_offset_active=1
title_vertical_offset_inactive=1
active_text_color=#fffbf9
active_text_shadow_color=#efebe9
inactive_text_color=#b0b0b0
inactive_text_shadow_color=#aaaaaa
shadow_delta_height=2
shadow_delta_width=0
shadow_delta_x=0
shadow_delta_y=-10
shadow_opacity=35
title_shadow_active=false
resize_opacity=100
move_opacity=100
popup_opacity=100
show_frame_shadow=true
show_popup_shadow=true
show_app_icon=true

最后，要应用主题，需要把以上文件复制到文件夹
~/.themes/themename/xfwm4
然后，在窗口管理器样式里选择自己制作的主题样式的名字themename，下图为上面svg定义的窗口实际效果。

三、个人补充

根据官网教程，定义xfwm4窗口主题完整的图片需求为60张。本人制作了一个仿OSX窗口按钮的暗色主题（配合使用gtk主题$yay x-arc-darker）

如上图所示，为方便从制作好的各部位图像批量导出，对每一个制作好部件组合成单一的对象（按快捷键Ctrl+G）后，再打开对象的属性（按快捷键Shift+Ctrl+O），对其ID命名。
然后编写两个文件（批量生成图像的脚本render-assets.sh及需要导出对象的ID列表assets.txt）
render-assets.sh内容如下：

#! /bin/bash

INKSCAPE="/usr/bin/inkscape"
OPTIPNG="/usr/bin/optipng"

SRC_FILE="Aob-dark-xfwm.svg"
ASSETS_DIR="xfwm4"
INDEX="assets.txt"

for i in `cat $INDEX`
do 
if [ -f $ASSETS_DIR/$i.png ]; then
    echo $ASSETS_DIR/$i.png exists.
else
    echo
    echo Rendering $ASSETS_DIR/$i.png
    $INKSCAPE --export-id=$i \
              --export-id-only \
              --export-png=$ASSETS_DIR/$i.png $SRC_FILE >/dev/null \
    && $OPTIPNG -o7 --quiet $ASSETS_DIR/$i.png 
fi
done
exit 0

assets.txt内容如下：

top-left-active
top-left-inactive
title-1-active
title-1-inactive
title-2-active
title-2-inactive
title-3-active
title-3-inactive
title-4-active
title-4-inactive
title-5-active
title-5-inactive
top-right-active
top-right-inactive
right-active
right-inactive
bottom-right-active
bottom-right-inactive
bottom-active
bottom-inactive
bottom-left-active
bottom-left-inactive
left-active
left-inactive
close-active
close-inactive
close-prelight
close-pressed
maximize-toggled-active
maximize-toggled-inactive
maximize-toggled-prelight
maximize-toggled-pressed
maximize-active
maximize-inactive
maximize-prelight
maximize-pressed
hide-active
hide-inactive
hide-prelight
hide-pressed
stick-toggled-active
stick-toggled-inactive
stick-toggled-prelight
stick-toggled-pressed
stick-active
stick-inactive
stick-prelight
stick-pressed
shade-active
shade-inactive
shade-prelight
shade-pressed
shade-toggled-active
shade-toggled-inactive
shade-toggled-prelight
shade-toggled-pressed
menu-active
menu-inactive
menu-prelight
menu-pressed

将这两个文件与制作好的svg文件放在同一文件夹，并在此建立xfwm4文件夹，打开终端执行脚本render-assets.sh即可在xfwm4文件夹看到批量生成的60张图片,配合上文的themerc文件，即完成xfwm4主题制作。