可缩放矢量图形包的制作方法

可缩放矢量图形(“svg”)是一种用于描述二维图形(例如，徽标或)的语言。svg指定能够用于使用可扩展标记语言(“xml”)来描述图形的元素和属性。svg支持描述三种类型的图形对象：矢量图形形状、图像和文本。矢量图形形状是一条或多条线的路径，诸如线、线的路径、圆形、矩形或任意多边形。svg支持设置图形对象的各种属性，诸如字体样式、笔划宽度、笔划图案、笔划颜色、填充颜色、滤镜效果等。

svg的主要元素是svg元素，它包括其他元素和属性。其他元素用于渲染形状，诸如圆形、矩形、椭圆形、路径等，并且用于渲染图像和文本。svg元素的属性指定图形的高度和宽度(例如，以像素为单位)、与原点相对应的点(其默认为左上角)等。图形的坐标相针对原点来指定。各种形状的属性是特定于形状的。例如，圆的属性指定圆的中心和圆的半径，并且矩形的属性指定该矩形在图形内的左侧和顶部位置以及矩形的高度和宽度。其他属性可以用于不同类型的形状。例如，矩形和圆形两者的属性指定笔划宽度、笔划颜色、填充颜色等。以下是定义在正方形内包括圆的图形的svg元素的示例。

示例1

在svg元素的开放svg标记中，宽度(width)和高度(height)属性指定图形为400×180。在矩形(rect)元素中，宽度(width)和高度(height)属性指定矩形的大小为150×150，x和y属性指定矩形位于位置(50，20)处，并且样式(style)属性指定矩形的各种属性，诸如填充颜色和填充不透明度。在圆形(circle)元素中，r属性将半径指定为75，cx和cy属性指定圆的中心位于位置(125，75)处，并且填充(fill)属性指定圆的填充颜色。

因为svg允许描述从非常简单到非常复杂的图形，所以svg是用于描述网页中的图形的非常流行的选择，其在超文本标记语言(“html”)文档中被描述。网页可以包括诸如用于表示复杂符号、公司徽标、动画等的很多图形，其使用svg而被描述。开发人员可以使用由另一开发人员开发的svg元素，而不是为复杂图形创建svg元素。例如，svg开发人员可以为各种流行图形开发svg元素，并且使其对网页开发人员可用。网页开发人员可以在网页中包括svg元素，或者在网页中包括对svg元素的引用。然而，网页开发人员可能需要修改svg元素以匹配网页的主题。例如，针对复杂符号的svg元素可以指定为红色的填充颜色，这可能不适合基于蓝色的网页的主题。修改svg元素以确保它们与网页的主题相一致可能需要花费大量的精力。

技术实现要素：

提供了一种用于创建遵循主题的svg定义(例如，svg元素)的svg包的svg系统。svg系统访问要被包括在包中的svg定义并且访问主题的主题属性。针对每个svg定义，svg系统检索svg定义。svg系统还为svg定义建立名称。svg系统修改svg定义以使用由主题指定的主题属性的值。svg系统将svg定义和所建立的名称存储在svg包中。svg系统还可以向svg包添加初始化函数。

为了使用svg包，网页包括主题的主题属性的值(并且通常还包括非主题属性的值)的规范以及对svg包中的svg定义的引用。在渲染网页时，由svg包指定的初始化函数被执行。针对每个svg定义，初始化函数生成用于将该svg定义插入到网页中对svg定义的引用的位置处的函数。当遇到对网页中的svg定义的引用时，执行针对svg定义而生成的函数，以将svg定义插入在对svg定义的引用的位置处。基于主题属性的值来处理svg定义，以针对网页来生成图形。

提供本“发明内容”是为了以简化的形式介绍一些概念，这些概念将在下面的“具体实施方式”中进一步被描述。本“发明内容”不旨在标识所要求保护的主题的关键特征或必要特征，也不旨在用于限制所要求保护的主题的范围。

附图说明

图1是示出一些实施例中的svg系统的组件的框图。

图2是示出一些实施例中的svg系统的创建包组件的处理的流程图。

图3是示出一些实施例中的svg系统的修改元素组件的处理的流程图。

图4是示出一些实施例中的svg系统的初始化函数的处理的流程图。

具体实施方式

提供了一种用于打包可缩放矢量图形元素以确保遵循主题的方法和系统。主题指定svg描述(例如，svg元素)的属性，属性的值将在svg描述之外被提供。例如，包括svg元素的网页可以具有样式元素，该样式元素提供网页的主题的主题属性的值。使用由样式元素指定的主题属性的值来渲染svg元素。如果相同的svg元素被包括在不同的网页中，则将使用由该网页的样式元素指定的主题属性的值来渲染svg元素。

在一些实施例中，svg系统创建遵循主题的svg描述的svg包(例如，文件)。当svg描述适用于使用在svg描述之外指定的主题属性的值时，它将“遵循”主题。例如，如果svg元素遵循指定填充属性的主题，则在svg元素被渲染时，通过(例如，从为填充属性提供值的样式元素)获取填充属性的值来将主题应用于svg元素。在渲染svg描述的图形时对于为主题属性指定的值的使用被称为将主题“应用”于svg描述。svg描述可以被开发以遵循主题，或者可以是已经被修改为遵循主题的现有svg描述。为了创建svg包，svg系统访问要被包括在svg包中的图形的svg描述。例如，可以使用html的svg元素预先指定每个svg描述。svg系统还访问主题属性，主题属性是要由主题指定的针对描述的属性。例如，主题属性可以是其值由基于层叠样式表(“css”)的样式元素html指定的那些属性。主题指定要由svg描述来使用的属性的值。例如，通过为字体属性指定特定值(例如，arial)并且为颜色属性指定特定值(例如，蓝色)，主题可以指定特定字体和特定填充颜色。svg系统修改svg描述，使得当它们被包括在文档中时，它们遵循文档的主题。例如，如果svg元素包括字体属性或颜色属性，则svg系统可以从svg元素中移除这些属性，使得svg元素从指定主题的样式元素继承这些属性。svg系统还为每个svg描述建立名称。例如，如果每个svg元素在单独的文件中，则svg系统可以使用文件的名称(例如，“acmelogo.svg”)作为svg元素的名称。然后，svg系统将经修改的svg描述及其名称存储在svg包中，该svg包可以是单个文件。例如，svg包可以包括每个svg元素和将svg元素的名称映射到它们在包内的位置的索引。

在一些实施例中，svg系统还可以向svg包添加初始化函数，该初始化函数为svg包内的每个svg描述生成svg函数。针对svg描述的svg函数的名称可以基于该svg描述的名称。当文档(例如，网页)包括由svg包的svg描述所描述的图形时，该文档可以包括对针对该svg描述的svg函数的调用。当文档被渲染时，初始化函数被执行，以生成svg函数并且将其注册到渲染引擎。每个svg函数在文档中在调用位置处插入其对应的svg描述。然后，渲染引擎渲染由svg描述所描述的图形。

在一些实施例中，svg包可以被存储在svg服务器处，在渲染引用svg包的svg描述以描述图形的文档时该svg服务器向客户端供应svg包。当客户端渲染引用svg包中的svg描述的文档时，客户端请求svg服务器提供svg包。如上所述，渲染引擎可以调用初始化函数和svg函数以将svg描述插入到文档中。当渲染引擎渲染svg描述的图形时，该渲染引擎使用由主题指定的属性的值，除非svg描述通过在svg描述中包括该属性的值来覆盖值。

以下是指定适用于svg元素的主题的样式元素的示例。

示例2

<style>

svg{fill:red；stroke:yellow；stroke-width:5；fill-opacity:0.1}

</style>

括号前面的svg是选择器，其指示特定于svg元素的主题，并且括号内的属性指定主题。以下示例示出了对示例1的svg元素进行修改以遵循主题。

示例3

已经从矩形元素中移除style属性，并且已经向圆形元素添加填充不透明度(fill-opacity)属性。在图形被渲染时，矩形将使用主题的属性来被渲染。圆形也将使用主题的属性被渲染，除了圆形元素覆盖主题的填充(fill)属性和填充不透明度属性。

在一些实施例中，svg元素的主题可以包括子主题，并且svg包的svg元素可以指定适用于它的子主题。例如，主题可以指定属性的某些值将用于一些类型的图形(例如，数学符号)并且其他值将由不同类型的图形(例如，多边形)使用。子主题可以使用用于样式元素的选择器的类来指定。以下是这样的选择器的示例。

示例4

以下示出了使用多子主题的对示例3的修改。

示例5

在该示例中，矩形将利用红色笔划被渲染。然而，圆形将利用黑色笔划被渲染，因为它会覆盖svg.poly类的笔划颜色。

svg系统解决了使用svg元素时遇到的若干技术问题。首先，svg系统允许svg包中的svg元素遵循主题。以这种方式，只要使用所指定的主题属性的值来渲染来自svg包的svg元素，就会基于这些值来渲染svg元素。其次，当网页包括对若干不同svg元素的引用时，渲染引擎将需要在单独的请求中请求每个svg元素。利用svg包，通常一起使用的svg元素能够被包括在同一包中，使得只需要单个请求就能检索所有svg元素。

图1是示出一些实施例中的svg系统的组件的框图。svg系统100包括经由通信信道140通信的包服务器110、客户端120和网页服务器130。包服务器包括打包器组件111(其包括创建包组件111a和修改元素组件111b)、初始化函数113、打包存储库114、svg文件115和包服务器组件116。打包器组件的创建包组件输入svg文件和主题的描述。创建包组件调用打包器组件的修改元素组件以修改svg文件内的svg元素以遵循主题。然后，创建包组件将经修改的svg元素和初始化函数存储到包中，并且将包存储在包存储库中。当渲染引用包内的svg元素的网页时，初始化函数被调用，以针对包的svg元素创建函数。包服务器组件从客户端接收针对svg元素的请求，并且将包含所请求的svg元素的包返回给客户端。包服务器还可以包括将svg元素映射到它们被存储在其中的包的索引。客户端包括浏览器121、网页高速缓存122和包高速缓存123。浏览器从网页服务器检索包括对存储在包中的svg元素的引用的网页。浏览器将检索到的网页存储在网页高速缓存中。浏览器还从包服务器检索包含网页的svg元素的一个或多个包，包服务器可以是网页服务器的一部分。浏览器将包存储在包高速缓存中。然后，浏览器调用渲染引擎来渲染网页。在渲染网页时，渲染引擎调用包的初始化函数以针对包的每个svg元素创建函数。当渲染引擎遇到对网页内的svg元素的函数的引用时，渲染引擎调用该函数以将svg元素插入到网页中。然后，渲染引擎处理svg元素以使用由网页的主题指定的主题属性的值来渲染由svg元素描述的图形。网页服务器包括网页131，网页131包括指定主题的属性的值的主题132。

在一些实施例中，svg系统的组件可以以不同方式来布置。例如，网页服务器可以包括包服务器和包存储库。在这种情况下，网页服务器还充当包服务器，其从包存储库向客户端供应svg包。作为另一示例，svg包的创建可以由与包服务器和网页服务器分离的计算系统来执行。在这种情况下，单独的计算系统可以包括创建包组件、修改元素组件、以及初始化函数组件和svg文件，并且生成包。然后，计算系统可以将包提供给包服务器以便供应给客户端。

可以在其上实现svg系统的计算系统可以包括中央处理单元、输入设备、输出设备(例如，显示设备和扬声器)、存储设备(例如，存储器和磁盘驱动器)、网络接口、图形处理单元、加速度计、蜂窝无线电链路接口、全球定位系统设备等。输入设备可以包括键盘、指示设备、触摸屏、姿势识别设备(例如，用于空中姿势)、头部和眼睛跟踪设备、用于语音识别的麦克风等。计算系统可以包括数据中心的服务器、大规模并行系统等。计算系统可以访问包括计算机可读存储介质和数据传输介质的计算机可读介质。计算机可读存储介质是有形存储装置，其不包括暂态传播信号。计算机可读存储介质的示例包括存储器，诸如主存储器、高速缓冲存储器和辅助存储器(例如，dvd)和其他存储装置。计算机可读存储介质上可以记录有数据，或者可以用实现svg系统的计算机可执行指令或逻辑来编码。数据传输介质用于经由有线或无线连接经由瞬态传播信号或载波(例如，电磁)传输数据。计算系统可以包括安全加密处理器作为中央处理单元的一部分，以用于生成和安全地存储密钥以及用于使用密钥加密和解密部署数据。

svg系统可以在由一个或多个计算机、处理器或其他设备执行的计算机可执行指令(诸如程序模块和组件)的一般上下文中描述。通常，程序模块或组件包括执行特定任务或实现特定数据类型的例程、程序、对象、数据结构等。通常，在各种示例中，程序模块的功能可以根据需要进行组合或分布。svg系统的各方面可以使用例如专用集成电路(asic)以硬件来实现。

图2是示出一些实施例中的svg系统的创建包组件的处理的流程图。向创建包组件200传递svg元素和主题的指示，并且创建包组件200生成包含被修改为遵循主题的svg元素的svg包。在框201中，组件访问主题的属性，这些属性被称为主题属性。在框202-208中，组件循环将每个svg元素添加到包。在框202中，组件选择下一svg元素。在判定框203中，如果所有svg元素已经被选择，则组件完成，否则组件在框204处继续。在框204中，组件为所选择的svg元素设置名称。例如，名称可以被设置为包含svg元素的文件的文件名。在框205中，组件清理svg元素。清理处理可以包括从每个svg元素中移除不想要的内容，诸如评论、作者信息和其他信息。清理处理还可以包括确保svg元素的格式化(例如，间隔和大小写)是一致的。在判定框206中，如果svg元素要遵循主题，则组件在框207处继续，否则组件在框208处继续。svg元素可能不遵循主题，例如，如果svg元素描述其颜色不变的公司徽标、标志等。在框207中，组件调用修改元素组件，该修改元素组件传递所选择的svg元素的指示以将svg元素修改为遵循主题。在框208中，组件将svg元素存储在包中，并且然后循环到框202以选择下一svg元素。

图3是示出一些实施例中的svg系统的修改元素组件的处理的流程图。向修改元素组件300传递元素和主题的指示，并且修改元素组件300修改元素以遵循主题。所示的修改元素组件通过从元素中移除主题属性来执行元素的直接修改。修改元素组件可以执行更复杂的修改，诸如添加类属性以访问子主题。在一些实施例中，组件还可以与用户交互以执行用户指定的修改或修改的抑制。组件可以简单地显示元素并且允许用户执行与css相一致的任何修改。在框301-304中，组件循环使元素的属性遵循主题。在框301中，组件选择元素的下一属性。例如，svg元素的属性可以包括svg元素的高度和宽度。圆形元素的属性包括中心的位置和圆的半径。在判定框302中，如果所有属性已经被选择，则组件在框305处继续，否则组件在框303处继续。在判定框303中，如果所选择的属性是由主题指定的主题属性，则组件在框304处继续，否则组件循环到框301以选择元素的下一属性。在框304中，组件从元素中移除属性，使得该属性将从主题来继承，并且然后循环到框301以选择下一属性。在框305-307中，组件循环处理传递的元素内的每个元素。例如，示例5的矩形元素和圆形元素在svg元素内。在框305中，组件选择传递的元素内的下一元素。在判定框306中，如果所有元素已经被选择，则组件返回，否则组件在框307处继续。在框307中，组件调用传递所选择的元素的修改元素组件，并且然后循环到框305以选择下一要素。

图4是示出一些实施例中的svg系统的初始化函数的处理的流程图。初始化函数400是被包括在svg包中并且由浏览器调用以初始化svg包的组件。在框401中，组件选择svg包的下一svg元素。在判定框402中，如果svg包的所有svg元素已经被选择，则组件完成，否则组件在框403处继续。在框403中，组件为所选择的svg元素创建函数。在框404中，组件将所创建的函数的名称设置为所选择的svg元素的svg名称。在框405中，组件添加所选择的svg元素作为函数在被调用时将要插入到网页中的数据。在框406中，组件向浏览器注册函数，并且然后循环到框401以选择下一svg元素。

以下段落描述铸造控制系统的各方面的各种实施例。svg系统的实现可以采用实施例的任何组合。下面描述的处理可以由具有处理器的计算设备执行，该处理器执行存储在实现铸造控制系统的计算机可读存储介质上的计算机可执行指令。

在一些实施例中，提供了一种由计算系统执行的方法。该方法访问主题的访问可缩放矢量图形(“svg”)定义和主题属性。针对每个svg定义，该方法检索svg定义并且为svg定义建立名称。针对每个svg定义，该方法修改svg定义以使用由主题指定的主题属性的值，并且将svg定义和所建立的名称存储在svg包中。在一些实施例中，该方法还在svg包中存储初始化函数以用于在svg包被网页访问时执行。在一些实施例中，针对每个svg定义，初始化函数基于svg定义的名称来生成具有函数名称的函数。生成的函数用于将svg定义插入到网页中调用函数的位置处。在一些实施例中，使用基于级联样式表(“css”)而指定的样式元素来指定主题，该样式元素具有针对svg元素的选择器。在一些实施例中，样式元素为主题内的不同子主题指定多个类。在一些实施例中，svg定义的修改包括向svg定义添加类属性以指定子主题。在一些实施例中，svg定义的修改包括从svg定义中移除具有相应主题属性的属性。在一些实施例中，当属性是不变量时，即使存在对应的主题属性，也不移除svg定义的属性。在一些实施例中，该方法进一步清理每个svg定义以从该svg定义中移除不想要的内容。

在一些实施例中，提供了一种由计算系统执行的方法。该方法接收网页，该网页包括主题的主题属性的规范和对svg包中的可缩放矢量图形(“svg”)定义的引用。在渲染网页时，该方法访问svg包。然后，该方法执行由svg包指定的初始化函数。针对svg包中的每个svg定义，初始化函数生成用于将svg定义插入到网页中的对svg定义的引用的位置处的函数。当遇到对svg定义的引用时，该方法执行针对该svg定义而生成的函数，以将该svg定义插入到对该svg定义的引用的位置处。然后，该方法基于主题属性的值来处理svg定义，以针对网页来生成图形。在一些实施例中，该方法还从包服务器下载svg包。在一些实施例中，主题由具有针对svg元素的选择器的样式元素指定。在一些实施例中，样式元素为主题内的不同子主题指定多个类。在一些实施例中，svg定义包括子主题的类属性。在一些实施例中，svg定义包括为不变量的属性，使得svg定义的属性的值覆盖对应主题属性的值。在一些实施例中，对svg定义的引用被指定为网页的分割元素的属性。在一些实施例中，svg定义使用svg元素来指定。

在一些实施例中，一种计算系统，其包括存储计算机可执行指令的计算机可读存储介质和用于执行计算机可执行指令的过程。当计算机可执行指令被执行时，计算系统访问可缩放矢量图形(“svg”)元素和由主题指定的主题属性。针对每个svg元素，计算系统为svg元素建立名称，修改svg元素以使用主题属性的值，并且将经修改的svg元素和所建立的名称存储在svg包中。在一些实施例中，计算机可执行指令在由计算系统执行时还在svg包中存储初始化函数以用于在svg包的svg元素被网页引用时执行。在一些实施例中，针对每个svg元素，初始化函数基于svg元素的名称来生成具有函数名称的函数。所生成的函数用于将svg元素插入到网页中svg元素被引用的位置处。

尽管用特定于结构特征和/或动作的语言描述了本主题，但是应当理解，所附权利要求书中定义的主题不必限于上述具体特征或动作。更确切地，上述具体特征和动作被公开作为实现权利要求的示例形式。因此，除了所附权利要求之外，本发明不受限制。